Web前端开发表单代码_纯CSS3样式

html5 css3 前端开发|前端开发 css3|web前端开发表单代码
技术点
html5的required,
伪类和css选择器的灵活运用,
新cs3增加的valid伪类使用,
before的中content的使用,
自定义特性的使用,
css获取函数attr的使用,
css3动画的使用。

接下来就是代码了,上。
运行代码:
代码片段 1

<!DOCTYPE html>
<head lang=”en”>
<metacharset=”UTF-8″>
<title>wap前端开发工具</title>
</head>
<body>
<style>
input,
label,
textarea{
-webkit-transition:all0.2sease;
display:block;
box-sizing:border-box;
padding-left:15px;
outline:none;
height:50px;
width:100%;
font-size:1em;
border:1pxsoliddarkgray;
border-radius:20px;
}
textarea{
padding-top:5px;
height:inherit;
font-size:1em;
}
label{
padding-left:0;
border:none;
margin-top:-50px;
}
textarea+label{
margin-top:-160px;
}
label:before,
textarea:before{
-webkit-transition:all0.2sease;
display:block;
background-color:#ffffff;
margin-left:20px;
margin-top:15px;
color:darkgray;
position:absolute;
font-size:1em;
content:attr(data-hold);
}
input:focus,
textarea:focus{
border:1pxsoliddarkorange;
}
input:focus+label:before,
textarea:focus+label:before{
color:darkorange;
-webkit-transform:translate(5px,-25px)scale(0.8,0.8);
}
input[type=”text”]:valid,
input[type=”password”]:valid,
textarea:valid{
border:1pxsolidgreen;
}
input[type=”text”]:valid+label:before,
input[type=’password’]:valid+label:before,
textarea:valid+label:before{
-webkit-transform:translate(-5px,-25px)scale(0.8,0.8);
color:green;
}
</style>
<inputid=”user” type=”text” required/>
<labelfor=”user” data-hold=”用户”></label>
<br/>
<inputid=”pwd” type=”password” required/>
<labelfor=”pwd” data-hold=”密码”></label>
<br/>
<textareaid=”coment” cols=”30″ rows=”10″ required></textarea>
<labelfor=”coment” data-hold=”留言”></label>
</body>
</html>

源码:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
<style>
input,label,textarea{
-webkit-transition:all 0.2s ease;
display: block;
box-sizing: border-box;
padding-left: 15px;
outline: none;
height: 50px;
width: 100%;
font-size: 1em;
border: 1px solid darkgray;
border-radius: 20px;

}
textarea{
    padding-top: 5px;
    height: inherit;
    font-size: 1em;
}
label{
    padding-left: 0;
    border: none;
    margin-top: -50px;

}
textarea+label{
    margin-top: -160px;
}
label:before,textarea:before{
    -webkit-transition:all 0.2s ease;
    display: block;
    background-color: #ffffff;
    margin-left: 20px;
    margin-top: 15px;
    color: darkgray;
    position: absolute;
    font-size: 1em;
    content: attr(data-hold);
}
input:focus,textarea:focus{
    border: 1px solid darkorange;
}
input:focus+label:before,
textarea:focus+label:before{
    color: darkorange;
    -webkit-transform:translate(5px,-25px) scale(0.8, 0.8);
}
input[type="text"]:valid,
input[type="password"]:valid,
textarea:valid{
    border: 1px solid green;

}
input[type="text"]:valid+label:before,
input[type='password']:valid+label:before,
textarea:valid+label:before{
    -webkit-transform:translate(-5px,-25px) scale(0.8, 0.8);
    color: green;
}

</style>
<input id=”user” type=”text” required/>
<label for=”user” data-hold=”用户”></label>
<br/>
<input id=”pwd” type=”password” required/>
<label for=”pwd” data-hold=”密码”></label>
<br/>
<textarea id=”coment” cols=”30″ rows=”10″ required></textarea>
<label for=”coment” data-hold=”留言”></label>

</body>
</html>

css3 前端开发插件|前端开发css文件模板下载|网站前端开发

» 本文来自:前端开发者 » 《Web前端开发表单代码_纯CSS3样式》
» 本文链接地址:https://www.rokub.com/3540.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!