Chrome CSS3 Box 阴影文本字段问题答案

【问题标题】：Chrome CSS3 Box shadow text field issueChrome CSS3 Box 阴影文本字段问题
【发布时间】：2011-10-12 17:22:07
【问题描述】：

在将框阴影应用于文本输入时，是否有人在 Google Chrome 中遇到过问题？我有这个晦涩的问题，有时在输入输入时，框阴影似乎加倍。我已经尝试了几件事，但似乎没有任何解决办法。最糟糕的是，这个问题非常不一致。我唯一能半一致地出现此问题的方法是每次都重置浏览器缓存。

应用于输入的 CSS 如下：

input[type=text] {
  padding: 7px 0 7px 10px;
  height: 14px;
  border: 1px solid #dadada;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: #e4e4e4 4px 5px 10px inset;
  -webkit-box-shadow: #e4e4e4 4px 5px 10px inset;
  -o-box-shadow: #e4e4e4 4px 5px 10px inset;
  box-shadow: #e4e4e4 4px 5px 10px inset;
}

input[type=text]:focus {
  outline: none;   
}

这里是运行代码的 JSFiddle。 http://jsfiddle.net/S5xzM/

任何见解将不胜感激！

[编辑] 目前发生这种情况的 Chrome 版本是 14.0.835

【问题讨论】：

对我来说与 14.0.835 中的 firefox 工作方式相同
它确实发生在我身上，Chrome Mac 14.0.835.202。只是我第一次写东西。

标签： google-chrome css

【解决方案1】：

有趣的问题！

这绝对是一个 Webkit 错误。仅当您将 outline: none; 放在焦点伪选择器上时才会发生这种情况。

这是我能找到的唯一解决方法：

input[type=text]:focus {
    outline-color: rgba(255,255,255,0);
    outline-offset: 10px;
}

我尝试了各种方法，例如outline-width: 0 或outline-color: transparent，但都不起作用。

http://jsfiddle.net/Gvh2L/

【讨论】：