网站登录必备！CSS设置输入框样式全攻略

设置输入框样式

说实话，我们就要说说网站登录时复制的事儿了。别急先看看这个 webkit 输人框的初始模样，看起来挺炫酷的。但如果想换个样子，看起来更简单点，那就得加点 css 代码。

这就是我弄好的CSS，我就不细讲每句css代码什么意思了，告诉你们几个关键点。首先，搜索框我设成55px宽，当鼠标放在上面时就会变成130px。还有那个transition属性，主要用来做动画特效的。Box-shadow也不能忘，这个能让输入框看着更炫酷哟~

例子B

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

DEMO B里的搜索框，我就稍微调整下它的 padding 和 width，把那个搜索图标做成圆圆的样子咯！然后，我又用了透明颜色，让文本那块儿看不出来~

浏览器兼容

告诉你这东西在各种大家常用的浏览器比如Chrome、 Firefox、Safari和IE8+上用起来超顺溜，但如果你还在用ie7甚至更早版本的话，那就抱歉了，它可能会犯迷糊，不知道search输入框长啥样！而且还有那个什么:focus伪类，它们在ie浏览器面前就是个难题~