所選單選按鈕的背景顏色不變

Question

我不打算使用fieldset，而是使用帶單選按鈕的跨度。相當新的HTML和jQuery。選中時需要更改單選按鈕的選定顏色。我是否使用錯誤的元素來顯示單選按鈕？下面的代碼：

<div id="sidebar"> 
 
    <span style="font-weight: bold;">Filter</span><br> 
 
    <input backgroundColor="red" type="radio" name="filter" value="schedule">Schedule<br> 
 
    <input type="radio" name="filter" value="risk">Risk<br> 
 
    <input type="radio" name="filter" value="opm">OPM<br> 
 
    <input type="radio" name="filter" value="location">Location<br> 
 
    <input background-color="red" type="radio" name="filter" value="all" checked>All<br> 
 
</div>

Answer 1

你需要更新HTML和CSS添加到實現這一目標：

HTML：

<div id="sidebar"> 
    <span style="font-weight: bold;">Filter</span> 
    <br> 
    <input type="radio" name="filter" value="schedule"><span>Schedule</span> 
    <br> 
    <input type="radio" name="filter" value="risk"><span>Risk</span> 
    <br> 
    <input type="radio" name="filter" value="opm"> <span>OPM</span> 
    <br> 
    <input type="radio" name="filter" value="location"> <span>Location</span> 
    <br> 
    <input type="radio" name="filter" value="all" checked><span>All</span> 
    <br> 
</div> 

CSS ：

input:checked + span { 
    color: red; 
} 

演示：http://jsfiddle.net/lotusgodkk/GCu2D/1023/

參考：https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

input[type=radio]:checked + span { 
    background:gold; 
}