Select label around input type radio CSS

1 Views

is it possible to select a surrounding label via css selectors?

I have following in a wordpress plugin.

Read More
  <label class="radio-inline" data-label="fach" for="fld_1266424_1_opt1107649">

     <input type="radio" id="fld_1266424_1_opt1107649" data-field="fld_1266424" class="fld_1266424_1 option-required user-success" name="fld_1266424" value="40" required="required" aria-required="true" aria-invalid="false">

        <span>Fach4</span>

 </label>

Now i want to create not normal radio button. It should look like a normal button so i added a padding, background-color and so on. But i have the problem that i can’t create a checked style for the label. Because this is – for sure – not working 

input[type="radio"]:checked label

Is it possible to style the label when the radio input is checked without touch the html form?

thanks!

Post Views: 1

Related posts

1 comment

  1. You can, but only if you make your html look like this:

    Since you have for attribute in label, radio button will get checked if you click on the label.

    input[type="radio"]:checked+label {
  color: red;
  margin: 30px;
}
    <input type="radio" id="fld_1266424_1_opt1107649" data-field="fld_1266424" class="fld_1266424_1 option-required user-success" name="fld_1266424" value="40" required="required" aria-required="true" aria-invalid="false">
<label class="radio-inline" data-label="fach" for="fld_1266424_1_opt1107649">
  Radio button

</label>

Comments are closed.