簡介
網(wǎng)頁UI自定義組件第三講 自定義表單輸入框樣式之一喷众。網(wǎng)頁上常見的種種UI效果我們經(jīng)常感覺太漂亮了各谚。接下來的幾天我們會一直來使用CSS3來制作一些常見的UI效果，來改變?yōu)g覽器默認UI效果侮腹。請大家持續(xù)關注嘲碧。今天我們要分享的是關于瀏覽器的表單元素中最讓人頭疼的自定義表單輸入框。同樣的會貼上視頻父阻。
常見的網(wǎng)頁UI效果
1481274717299113.jpg
案例效果
1481274822473736.png
技巧說明
input:text 文本輸入框沒有:before :after這個偽類愈涩。所以可以利用它父級身上DIV的偽類來實現(xiàn)望抽。
代碼
<!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>
