自定义webkit搜索框样式

好吧，这是个有点儿蛋疼的文章，每个浏览器都可以有自己的行为和表现，只是webkit在apple的带领下，在UI上走的更远了一点儿，但是却给我们带来了点儿困扰，因为很多情况下，我们希望搜索框在所有的浏览器上表现一致。。。

用过mac的同学应该了解这个情况：

就拿前端观察右上角的搜索框来说，在Windows下和mac下的表现就完全不一样啊，mac下(包括safari和chrome)，除了宽度外，你设置的其它样式基本是无效的，这种细长的界面和iOS上的搜索框是一样的，或许苹果认为，搜索框就应该是这样的？

那我们在很多情况下需要让页面在所有平台，所有浏览器下表现都基本一致，这就有点儿悲催了，但是也不是没有办法的。。。

方法一：不用type=search

这是最简单的一了百了的做法，使用默认的type=text吧，这样你就可以像定义普通文本框那样定义搜索框了，不足的地方是，搜索的用户体验也不太一样了，同时也会影响到其它浏览器。

方法二：-webkit-appearance

但是方法一对于语义控来说是无法接受的吧，那么我们也可以用CSS3 appearance来解决，这是个很有用的东西啊。

对于设置type=search的搜索框，webkit的appearance设置是：

1	-webkit-appearance: searchfield;

我们将其设置为：

1	-webkit-appearance: textfield;

即可。

貌似这是最完美的方法了

方法三：各种伪元素

webkit的一大优点就是提供了丰富的伪元素来定义一些UI，对于搜索框来说，也有一些可用的：

123456

input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration {display: none;}

它们分别用来控制搜索框首尾的两个icon：

其实，前面的搜索按钮，是和input的results属性关联的，去掉该属性亦可。

自定义placeholder样式

HTML5表单的placeholder属性是非常好用的，但是基本大家也都follow浏览器的ua样式了，其实可以用一个伪元素来改变这个默认的表现：

123456

::-webkit-input-placeholder {/*place your style here*/}::-moz-input-placeholder {/*place your style here*/}/*firefox support too*/

另外，有个细节，就是对于placeholder的文字，Firefox/Opera/IE9在输入框focus的时候会隐藏，而chrome却只有在输入任何文字的时候才会隐藏，到Chrome社区反馈了下，Chrome开发人员说是follow了OSX Lion和iOS下Safari的行为。。。但是Windows版的Safari却是focus时隐藏的。。。

W3C规范中对于Placeholder的描述中提到：

User agents should present this hint to the user, after having stripped line breaks from it, when the element’s value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).via

所以，看来Firefox/Opera等浏览器的行为是比较“正确”——虽然这里无所谓对于错，只是用户操作习惯的问题。

不止我自己向Chromium社区反馈这个bug，但是看来Chrome是不准备fix的，那么如果我们要让webkit和其它浏览器的行为保持一致，也是可以修正的：

1	input:focus::-webkit-input-placeholder { color: transparent; }

结语

当然没有一个浏览器是完美的，我们以后和webkit打交道的机会会越来越多，虽然有一些类似的很琐碎的界面修正，但是webkit的优点是提供了比较多的私有样式(虽然并不全部是CSS3草案中的)让我们可以更自由的自定义，而从另一方面，对于最近火热的反webkit行动来说，如果其它浏览器兼容了这些不太标准化的行为的话，大家肯定是不愿意看到的吧。

 

ZT FROM HP：http://www.qianduan.net/search-box-style-custom-webkit.html

 

转载于:https://www.cnblogs.com/mixzo/p/4213640.html