Tagged

placeholder

A collection of 1 post

Chrome

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致。。。 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的? 那我们在很多情况下需要让页面在所有平台,所有浏览器下表现都基本一致,这就有点儿悲催了,但是也不是没有办法的。。。 方法一:不用type=search 这是最简单的一了百了的做法,使用默认的type=text吧,这样你就可以像定义普通文本框那样定义搜索框了,不足的地方是,搜索的用户体验也不太一样了,同时也会影响到其它浏览器。 方法二:-webkit-appearance 但是方法一对于语义控来说是无法接受的吧,那么我们也可以用CSS3 appearance来解决,这是个很有用的东西啊。 对于设置type=search的搜索框,webkit的appearance设置是: -webkit-appearance: searchfield; 我们将其设置为: -webkit-appearance: textfield; 即可。 貌似这是最完美的方法了 方法三:各种伪元素