Custom CSS to radio button labels - css

Question

I need to add custom styling to the checked/active radio button behind the label.
I can get the border and width of the buttons fine, just can't set a background color to the checked/active button only. As the input-label is outside the div I can't seem to manage it.
I can't mess with the code below, can only change CSS.
Can anyone help me please?
<label class="radio-inline display-block col-sm-3" for="concern" style="color: rgb(102, 102, 102);">
<span class="has-pretty-child">
<div class="clearfix prettyradio labelright blue has-pretty-child">
<input class="radio the_input_element" name="runway_surface" id="concern" value="Concern" style="display: block !important; color: rgb(50, 55, 60);" autocomplete="off" type="radio">
<a class="checked fa fa-check ui-state-active" style="color: rgb(0, 163, 201);"></a>
</div>
<span class="input-label radio-label" style="color: rgb(102, 102, 102);">Concern</span>
</span>
Something like this:

Answer 1

The idea here is the label element which can create amazing things.
Playing with it can generate you a bunch of great effects.
You just need to hide the radios or checkboxes and work with its labels, and you need to know three important css selectors for this effect:
The general next sibling: element ~ sibling{ style } which select all the sibling found after the element
The direct next sibling: element + sibling{ style } which select only the first sibling after the element
The checked input selector: input:checked{ style } which selects the input if it's checked only.
And this effect can be done with these steps:
Create an input and a label for every choice you need
Connect every input with its label using the for and id
Hide the input using something like display: none or others
Set a style for your label which will be the default mode
Set a new style for the label that placed after a checked input input:checked + lebel{ style }
Now we can apply it:
nav{
width: fit-content;
border: 1px solid #666;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
}
nav input{ display: none; }
nav label{
font-family: sans-serif;
padding: 10px 16px;
border-right: 1px solid #ccc;
cursor: pointer;
transition: all 0.3s;
}
nav label:last-of-type{ border-right: 0; }
nav label:hover{
background: #eee;
}
nav input:checked + label{
background: #becbff;
}
<nav>
<input type="radio" id="x1" name="x"/>
<label for="x1">Choice 1</label>
<input type="radio" id="x2" name="x"/>
<label for="x2">Choice 2</label>
<input type="radio" id="x3" name="x"/>
<label for="x3">Choice 3</label>
<input type="radio" id="x4" name="x"/>
<label for="x4">Choice 4</label>
<!-- as many choices as you like -->
</nav>
And it's done now.
You can search for many many ideas on codepen and you can see this great navigation bar using only css and navigates throw the different pages:
Nav Bar Using Only CSS
Or See this collapsed nav bar that can be opened or closed using only css too:
Open & Close Nav Bar Using CSS

Answer 2

To style a checkbox or a radio button you need to hide the real input and style another element to look like the one you need. Please refer to this w3schools page for a tutorial on how to do this: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

Answer 3

you need to hide the real input and style another element to look like the one you need. Please refer to this
<input type='checkbox' name='checkbox-btns' id='checkbox-btn-2'/> <label htmlFor='checkbox-btn-2' class='btn'> Unsafe</label>
input[type=checkbox]{display:none;}
input[type=checkbox] + label.btn{
width:300px;
padding: 5px 5px;
text-align: center;
margin: 5px 5px;
display: inline-block;
text-transform: capitalize;
font-size: 10px;
font-weight: 600;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #0088cc;
color: #0088cc;
-webkit-transition: none;
-moz-transition: none;
transition: none;
border-radius: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label.btn{
background: #0088cc;
color:white;
}