Custom CSS to radio button labels

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:

1. The general next sibling: element ~ sibling{ style } which select all the sibling found after the element
2. The direct next sibling: element + sibling{ style } which select only the first sibling after the element
3. 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

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;
}

Answer 3

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