zoukankan      html  css  js  c++  java
  • 去除input[type=search]的边框

    转http://i.wanz.im/2011/02/04/remove_border_from_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覆盖的内置样式,应该都能通过它解决^_^

  • 相关阅读:
    洛谷 P1260 工程规划(差分约束)
    洛谷 P3660 [USACO17FEB]Why Did the Cow Cross the Road III G(树状数组)
    [模板]单调队列
    [模板]LIS(最长上升子序列)
    洛谷 P2899 [USACO08JAN]手机网络Cell Phone Network(树形动规)
    如何求数字n的因数个数及因数和
    [模板]tarjan缩点+拓扑排序
    itext生成pdf(附带页眉,页脚,页码)
    工作总结03
    工作总结02(海报上传模块)
  • 原文地址:https://www.cnblogs.com/lyweb/p/2947994.html
Copyright © 2011-2022 走看看