老师，请问我邮箱两个字怎么不往左移动
来源：4-10 编程练习
慕粉8021849
2020-02-09 21:28:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
*{
margin:0;
padding:0;
}
input{
height:2em;
}
.container{
position:relative;
}
.youxiang{
position:absolute;
left:5px;
top:2.5px;
}
input:valid~label::after{
content:"你邮箱正确";
}
input:invalid~label::after{
content:"你邮箱不正确";
}
input:valid{
border-color:green;
}
input:invalid{
border-color:red;
}
input:focus +span,input:hover +span{
transform: translateX(-120%);
}
</style>
</head>
<body>
<div class="container">
<span class="youxiang">邮箱</span>
<input type="email" placeholder="请输入邮箱">
<label></label>
</div>
</body>
</html>
1回答
-
好帮手慕码
2020-02-10
同学你好，使用input + span的方式说明input在前，span在后。建议修改布局，如下：
效果：
如果我的回答帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题