html - 使用 CSS "content"属性中断表单交互

Question

作为一项可用性功能，我想以类似于 the moneysupermarket forms 的方式向当前聚焦的表单元素添加高亮显示。 .我正在使用一种 HTML 模式来构建我无法更改的表单:

<div class="field">
  <label for="name">
    Name
  </label>
  <input id="name" type="text" value="Fred">
</div>

我想我会想出一个简单的解决方案:我将向所有输入、选择和文本区域添加 focus 和 blur 事件以切换 .hasfocus 包装 div 上的类，然后在该类上 Hook 样式。

这是一个 demo on JSBin 但如果您使用的是 Firefox 或 Chrome 40，您可能会看到我遇到的问题:Adding the CSS content property to the div.field breaks表单交互，似乎最初的鼠标点击被浏览器吞没了，您无法选择内容。我很难过，我认为这可能是浏览器错误。有什么想法可以使突出显示的元素与其他元素表现得一样吗？

提前致谢!

编辑:

这是演示该问题的截屏视频:http://screencast.com/t/LlmwcsZ2qYM

Answer 1

我无法在 Chrome 42 中重现，但我在 Firefox 37 中重现了这一点。似乎向标签元素添加突出显示解决了这个问题:

.field.hasfocus label:before {
    content:"";
    ...
}

更新后的 JS Bin:http://jsbin.com/kajifoquci/edit?html,css,js,output