html - 更改内部元素处于焦点时的颜色

Question

当用户选择其中的文本框时，我想更改 tr 元素的颜色。焦点伪类不使用它。这可以在没有 JavaScript 的情况下实现吗？

html:

<table>
<tr>
    <td>Name</td><td><input type="text" name="name"></td>
</tr>
</table>​

CSS：

tr:focus
{
    background:yellow;
}​

Update1：
​​看起来没有 CSS only 方法。使用 JavaScript 最简单的方法是什么？

Answer 1

使用 :focus-within 怎么样？

<table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
  </tr>
</table>​

CSS：

tr:focus-within {
  background:yellow;
  }​

小提琴

对我有什么帮助。因为选择的答案对我不起作用。

Answer 2

不，CSS3 中没有主题选择器，但CSS4中会有一个。

编辑：

一个纯 JavaScript 解决方案可能是

var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
    inputs[i].addEventListener('focus',function(e){
        this.parentNode.parentNode.className += ' highlight';        
    });
    inputs[i].addEventListener('blur',function(e){
        this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
    });
}

但是，这在 IE≤7 中不起作用，因为之前 8 的版本不知道document.querySelectorAll（演示）。如果您想要一个无忧无虑的跨浏览器解决方案，您可以使用jQuery和以下代码（演示）：

$("tr > td > input").focus(function(e){
    $(this).parent().parent().addClass('highlight');
}).blur(function(e){
    $(this).parent().parent().removeClass('highlight');
});

不要忘记在tr.highlight你的 CSS 中添加一个类。请记住，jQuery 将在未来版本中放弃对旧浏览器的支持（请参阅浏览器支持），因此对于 IE ≤8，您必须使用 jQuery 1.x。

Answer 3

在足够新的浏览器上，通过在tr元素上使用tabindex属性（例如<tr tabindex="1">.

然而，聚焦的方法是依赖于浏览器的，而可聚焦的表格行可能是可用性的噩梦。例如，在 IE 和 Firefox 上，当适当使用 TAB 键时，该行将聚焦，但聚焦行不接受输入。用户需要再次点击 TAB 才能进入输入字段。在 Firefox 上，但不是在 IE 上，也可以通过单击来关注该行，但不能通过单击输入字段（因为这将关注该字段）。如果您使用label标记，推荐使用性和可访问性，例如

<table>
<tr tabindex="1">
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" id="name"></td>
</tr>
</table>​

…然后点击标签关注输入字段（使用label标记的原因之一！），而不是行元素。

Answer 4

正要说：http: //jsfiddle.net/qHmGe/

Answer 5

不，你不能没有 JavaScript。