Select label around input type radio CSS

Question

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

I have following in a wordpress plugin.

  <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!

score 2 · Accepted Answer · answered Feb 26 '16 at 00:05

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>

Select label around input type radio CSS

1 Answers1