CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 71

CSS Styling of Selected Radio Label

With this HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">text 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">text 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">text 3</label>
  </div>
</form>

</body>
</html>

I am looking to have a border black on unselected radio label, and red on selected radio label.

I tried using this CSS:

span.radio input[type="radio"] + label{
    border:1px solid black;
}

span.radio input[type="radio"]:checked + label{
    border:1px solid red;
}

but am having issues with it turning red on select, any help would be appreciated.

thanks

Upvotes: 1

Views: 181

Answers (1)

random_user_name
random_user_name

Reputation: 26150

The issue is that you are trying to address inputs that are inside of a span.radio, which does not exist in your markup.

span.radio input[type="radio"] + label {

Says "inside a span with a class of radio, find inputs of type radio and style the immediately adjacent label".

Your markup has no span with a class of radio, but it DOES have a div with ID of radio.

Revise your CSS as follows:

div#radio input[type="radio"] + label {
  border: 1px solid black;
}

div#radio input[type="radio"]:checked + label {
  border: 1px solid red;
}

Working Fiddle

Upvotes: 2

Related Questions