是否可以在输入：焦点上更改字段集的背景颜色？

Question

当光标位于任何字段集的文本字段中时，是否可以使表单的字段集的背景色发生变化？

我以为这可能会奏效，但它并不：如果你不使用的可访问性的原因字段集

fieldset {background: #ffe;} 
input[type=text]:focus+fieldset {background: #ff0;} 

Answer 1

恐怕是不可能的CSS，CSS以来一直没有得到一个选择，将一个元素的儿童的基础上进行选择。您尝试的选择器input[type=text]:focus+fieldset与fieldset元素相匹配，立即跟随聚焦的文本输入框 - 与您想要的东西完全不同。

然而，使用JavaScript处理这个问题可能并且相当容易。你只需要在fieldset中的字段上使用onfocus和onblur事件处理程序，而这些处理程序可以是所有这些处理程序的相同功能;他们只是改变了fieldset元素的style.background财产，

Answer 2

，那么就做这样的事情：

http://www.pmob.co.uk/temp/categorybox.htm

如果你需要边界和可访问性，可以考虑在div中包装fieldset，然后设计包含div而不是字段集的样式。

希望这会有所帮助！

马特

Answer 3

如果您正在使用jQuery和你是不是嵌套的字段集，你可以做一个简单的绑定其自身附加到你的所有页面控件字段集内，每当您将重点放在/关注这些控件中的任何一个，从包含该控件的字段集中添加/移除一个类。

这里有一个例子：

$('input, label, select, option, button', 'fieldset').each(function (index, item) { $(this).focus(function() { $(this).closest('fieldset').addClass('fieldsetFocus'); }); $(this).blur(function() { $(this).closest('fieldset').removeClass('fieldsetFocus'); }); });

Answer 4

基于其子input S的一个焦点状态时，无法风格fieldset。

但是，您可以通过添加一个空div为fieldset的最后一个孩子，其样式，模拟效果。这div的风格，然后可以使用一般的兄弟选择来改变所聚焦的input：

fieldset { 
 
    border: none; 
 
    position: relative; 
 
    margin-bottom: 0.5em; 
 
} 
 

 
legend { 
 
    position: relative; 
 
    background: white; 
 
} 
 

 
input:focus { 
 
    background: lightyellow; 
 
} 
 

 
input:focus ~ div { 
 
    border: 2px solid black; 
 
    background: #def; 
 
} 
 

 
fieldset > div { 
 
    height: calc(100% - 0.5em); 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0.5em; 
 
    left: 0; 
 
    border: 2px solid lightgray; 
 
    z-index: -1; 
 
}

<fieldset> 
 
    <legend>Fieldset 1</legend> 
 
    <input name="text1" type="text" /> 
 
    <input name="text2" type="text" /> 
 
    <div></div> 
 
</fieldset> 
 
<fieldset> 
 
    <legend>Fieldset 2</legend> 
 
    <input name="text3" type="text" /> 
 
    <input name="text4" type="text" /> 
 
    <div></div> 
 
</fieldset>