I know how to change the appearance of the standard input. For example, there will be no problems with this code:

<input id="r1" name="radio1" type="radio" /> <label for="r1">Option 1</label>

But what about the dependence on input nested in a label?

 <span class="val"> <label><input type="radio">Option 1</label> <label><input type="radio">Option 2</label> <label><input type="radio">Option 3</label> <label><input type="radio">Option 4</label> </span>

That is, we set the view for the label, the input is hidden. And with the selection of the selected object is a dead end. It is clear that the issue can be solved with a simple script. But is it possible to do only design styles?

An example of what I would like to receive.

enter image description here

There is no way to tag text inside a label, so the standard input: checked + label for defining active value styles is not appropriate.

  • and what is the fundamental difference between the first and second option? not sure, but maybe you should assign a class to input and set styles for this class. - Vyacheslav Danshin
  • What exactly is your problem? show css code for input. Normally label does not affect the rendering and selection of input. - Alex
  • I added a description with a screenshot. I want to turn the choice of values ​​into a more convenient form. But, at registration of a label it is not possible to become attached to the selected input. - Alexey Giryayev

2 answers 2

text inside label wrap in span

Example

 .b-radio label{ display: inline-block; } .b-radio label input{ display: none; } .b-radio label input + span{ position: relative; padding: 15px 30px 15px 30px; white-space: nowrap; } .b-radio label input + span:before{ content: ''; position: absolute; top: 50%; left: 0; margin-top: -10px; width: 20px; height: 20px; background: #ccc; border-radius: 50%; } .b-radio label input:checked + span:before{ background: tomato; } 
 <div class="b-radio"> <label> <input type="radio" name="radio" checked> <span>Option 1</span> </label> <label> <input type="radio" name="radio"> <span>Option 2</span> </label> </div>

  • Thank. I wrote about this submission. If the text was wrapped in a tag, then there would be no problem. The thing is that the code is generated by the system and cannot be changed. - Alexey Giryayev 1:56 pm

Flexbox crutch

 label { color: black; display: inline-block; height: 2em; line-height: 2em; border: 1px solid; padding: 0 .5em; cursor: pointer; display: inline-flex; flex-direction: column; vertical-align: middle; border-radius: 1em; overflow: hidden; } input { margin: 0; flex: 0 0 2em; order: 1; font-size: inherit; visibility: hidden; } input:checked { order: 3; } label:after { content: ""; flex: 0 0 2em; margin: -2em -.5em 0; background: silver; order: 2; z-index: -1; } 
 <label><input type="radio" name="r">Option 1</label> <label><input type="radio" name="r">Option 2</label> <label><input type="radio" name="r">Option 3</label> <label><input type="radio" name="r">Option 4</label>

And color inversion

 label { color: black; display: inline-block; height: 2em; line-height: 2em; border: 1px solid; padding: 0 .5em; cursor: pointer; display: inline-flex; flex-direction: column; vertical-align: middle; border-radius: 1em; overflow: hidden; } input { margin: 0; flex: 0 0 2em; order: 1; font-size: inherit; visibility: hidden; } input:checked { order: 3; } label:after { content: ""; flex: 0 0 2em; margin: -2em -.5em 0; background: white; order: 2; mix-blend-mode: difference; } 
 <label><input type="radio" name="r">Option 1</label> <label><input type="radio" name="r">Option 2</label> <label><input type="radio" name="r">Option 3</label> <label><input type="radio" name="r">Option 4</label>

It seems, it is necessary to finish interaction with borders still.
Well, browsers support check everything ...

  • Used flex to align elements in the center. And then there is a similar solution. I will understand and test. Thank you very much for the tip. - Alexey Giryayev