简介
网页UI自定义组件第三讲 自定义表单输入框样式之一。网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果，来改变浏览器默认UI效果。请大家持续关注。今天我们要分享的是关于浏览器的表单元素中最让人头疼的自定义表单输入框。同样的会贴上视频。
常见的网页UI效果
1481274717299113.jpg
案例效果
1481274822473736.png
技巧说明
input:text 文本输入框没有:before :after这个伪类。所以可以利用它父级身上DIV的伪类来实现。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
div{
width: 600px;
margin: 100px auto;
position: relative;
}
div:before,div:after{
display: block;
content: " ";
height: 20px;
border-left: 1px solid #fff;
position: absolute;
top: 0;
}
div:before{
left: 0;
}
div:after{
right: 0;
}
input{
-webkit-appearance: none;
transition: all 0.3s;
vertical-align: top;
box-sizing: border-box;
border: 1px solid #1E90FF;
border-width: 0 1px 1px 1px;
width: 100%;
outline: none;
padding: 5px;
}
input:focus{
border-color: pink;
}
</style>
</head>
<body>
<div>
<input type="text" />
</div>
</body>
</html>
