是否可以在輸入：焦點上更改字段集的背景顏色？

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>