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

Question

作为一个可用性特性，我想以类似于moneysupermarket表单的方式，为当前关注的表单元素添加亮点。我正在使用一种HTML模式来构建我无法更改的表单：

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

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

这里有一个关于JSBin的演示，但如果你使用Firefox或Chrome 40，你可能会看到我的问题：将CSS content属性添加到div.field会破坏表单交互；您无法选择内容。我被难住了，我想这可能是浏览器的错误。有什么想法可以让突出显示的元素表现得像其他元素吗？

提前感谢！

编辑：

以下是演示该问题的屏幕截图：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，输出

Answer 2

您错过了test-x引用。通过标签关注字段的整个想法是for属性与id属性的映射。name属性本身并不能解决问题。由于id必须在页面上有一个唯一的值，所以我最终得到了5。

<label for="test5">
    Test 5
</label>
<!-- name="test4" -->
<select id="test5">
  <option value="">one</option>
  <option value="">two</option>
  <option value="">three</option>
</select>

因此，您可以使用简化您的逻辑

$('input, select, textarea').on('focus blur', function (){
    var el = $(this),
        field = el.closest('.field');
    field.toggleClass('hasfocus');
});

您可以保留.control.hasfocus:before以在.control类上禁用此效果。

希望这能有所帮助。

DEMO