自定义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,对于搜索框来说,也有一些可用的:
1 2 3 4 5 6 |
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样式了,其实可以用一个伪元素来改变这个默认的表现:
1 2 3 4 5 6 |
::-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行动来说,如果其它浏览器兼容了这些不太标准化的行为的话,大家肯定是不愿意看到的吧。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:神飞 来源: 前端观察
- 标签: webkit 搜索框
- 发布时间:2012-03-04 17:45:38
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [50] android 开发入门
- [50] Oracle MTS模式下 进程地址与会话信
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑