【问题标题】:unknown border in chrome inputchrome输入中的未知边框
【发布时间】:2012-07-10 00:53:58
【问题描述】:

我有一个带有奇怪边框的搜索输入。我已经尝试删除轮廓、阴影、:focus 和 :active 样式,但没有得到任何结果。

这只发生在 Chrome 上。在 Firefox 和 Safari 上,边框不存在。

这是截图 - http://d.pr/i/yPNo - 这是我正在使用的代码 - http://jsfiddle.net/3CDcV/

【问题讨论】:

  • jsfiddle 代码似乎在 chrome/mac 20.0.1132.47 上正确呈现
  • 不在我的 chrome 中你能帮我吗?
  • 您使用的是哪个版本的 chrome?我无法从屏幕截图中看出,但似乎输入元素本身上可能有一个元素,其中输入元素具有正确的圆形边框,但另一个元素正在遮住部分边框。
  • 我的 chrome 版本 20.0.1132.4 和 jsfiddle 我让它看起来和截图一样。
  • 我可以在 Chrome 22.0.1201.0 Canary 上复制这个问题。

标签: html css google-chrome


【解决方案1】:

给你

input[type="search"]{
    border-radius:4px;
    -webkit-border-radius: 4px;
    height:25px;
    width:150px;
    background:#181818;
    border:1px solid #0e0e0e;
    padding-left:5px;
    color:#666;
    font-size:10px;
    -webkit-box-shadow:  1px 1px 0px 1px #202020;
    box-shadow:  1px 1px 0px 1px #202020;
    margin-left:5px;
    margin-right:5px;

    -moz-appearance:none;
   -webkit-appearance:none;
}  ​

DEMO.

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-07-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-16
  • 1970-01-01
  • 2014-01-29
相关资源
最近更新 更多