去除input[type=search]的边框

新年在家其实挺无聊的,长假什么的都是浮云,然后就给自己的博客弄个新皮,试着给页面添加点新鲜的元素,什么html5,什么css3的,然后遭遇了input这货,将它的type设置为search。
html代码如下:

css代码如下:

在IE和Firefox中显示的结果跟预期的一样,但在webkit内核浏览器里,border的设置并没有被应用。

在IE和Firefox中显示的结果:
IE和Firefox中的input

在Chrome中显示的结果:
在Chrome中input

在Chrome开发人员工具查看input的样式可以看到如下的以及类似的UA样式:
Chrome开发人员工具中input的样式

我猜想是跟-webkit-appearance有关,于是到Google里淘了一篇介绍input的type为search的文章“WebKit HTML5 Search Inputs”,虽然文章提到了input的type为search时,样式编写有局限性(并非所有的css属性都可以被用户用代码覆盖),但没有提到这个问题的解决方案,但是我在评论中找到了解决办法。

在css里加入下面代码解决了:

从这个属性的名字看来,只要是webkit内核浏览器遇到无法用css覆盖的内置样式,应该都能通过它解决^_^

如需转载,请注明出处:https://i.wanz.im/2011/02/04/remove_border_from_input_type_search/

Comments

  1. By caixw

    回复

  2. By dk0

    回复

  3. 回复

  4. 回复

  5. 回复

  6. 回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.