0

I do not intend to use the fieldset but using a span with radio buttons. Pretty new to html and jquery. I need to change the selected color of the radio button when it is checked. Am i using the wrong elements to show the radio button? Here' s the code:

<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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Surily
  • 121
  • 2
  • 10

2 Answers2

1

You'll need to update HTML and add CSS to achieve this:

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;
}

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/1023/

Reference: https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

K K
  • 17,794
  • 4
  • 30
  • 39
0
input[type=radio]:checked + span {
  background:gold;
}
Chintan Mirani
  • 1,464
  • 9
  • 18