4-8编程练习为什么验证正确信息出不来

来源：4-7 valid和invalid伪类美化表单案例

dkwong

2017-10-08 23:57:00

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
<title>4-8编程练习表单美化</title>
<style type="text/css">
   .container{margin:100px;position: relative;}
input{width:140px;height: 30px;line-height: 30px;border-radius: 3px;outline: 0;border:1px solid #999;text-indent: 36px;transition: all 0.5s;}
.title{position: absolute;top: 7px;left:3px;transition: all 0.5s;}
/*鼠标移上去或者获得焦点、在此处填写代码*/
input:hover,input:focus{text-indent: 3px;}
input:hover +span.title,input:focus +span.title{
transform: translateX(-120%);
}
/*不符合验证的label、在此处填写代码*/
input:invalid ~label::after{content: "您输入的email不格式正确";};
/*符合验证的label、在此处填写代码*/
input:valid ~label::after{content: "您输入的email格式正确";};
</style>
</head>
<body>
<div class="container" >
<input type="email" id="input" repuired placeholder="请输入邮箱">
<span class = "title">邮箱</span>
<label for="input" ></label>
</div>
</body>
</html>

写回答

1回答