自定义webkit搜索框样式

时间:2023-03-08 16:07:06

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

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

自定义webkit搜索框样式

就拿前端观察右上角的搜索框来说,在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:

自定义webkit搜索框样式

其实,前面的搜索按钮,是和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