html注册表单ui,网页UI-自定义表单输入框

简介

网页UI自定义组件第三讲 自定义表单输入框样式之一。网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果，来改变浏览器默认UI效果。请大家持续关注。今天我们要分享的是关于浏览器的表单元素中最让人头疼的自定义表单输入框。同样的会贴上视频。

常见的网页UI效果

1481274717299113.jpg

案例效果

1481274822473736.png

技巧说明

input:text 文本输入框没有:before :after这个伪类。所以可以利用它父级身上DIV的伪类来实现。

代码

*{

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;

}