这个为什么邮箱字体不会往前
来源：4-13 html5默认气泡修改演示
慕雪9296518
2020-06-10 16:42:55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{margin: 100px;position: relative;}
input{border: 1px solid #999;outline: 0;width: 140px;height: 30px;
line-height: 30px;text-indent: 36px;transition: all .3s;border-radius: 8px;}
span.title{position: absolute;line-height: 30px;height: 30px;left: 2px;
top: 2px;transition: all 0.3s;font-weight: bold;}
input:required{box-shadow: 0 0 3px 1px red;}
input:focus,input:hover{
text-indent: 2px;
}
input:focus +span,input:hover +span{left:-38px}
input:valid{box-shadow: 0 0 3px 1px green;}
input:valid ~label::after{content: "邮箱格式正确";}
input:invalid ~label::after{content: "邮箱错误";}
</style>
</head>
<body>
<div class="container">
<form action=""><input type="email" id="mail" required placeholder="输入邮箱"> </form>
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>
1回答
-
同学你好，问题解答如下：
由于span和input标签不是同级元素，所以选择器“input:focus + span, input:hover + span ”无法匹配到span元素，因此“邮箱”二字没有往前。
选择器“input:focus + span”的意思是当input获取焦点时，匹配该input后面的span元素，即span和input应该是同级兄弟元素，所以需要修改一下结构，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题