'Custom CSS to radio button labels

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:

Image of before and ideally what I need after

css


Solution 1:[1]

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

Solution 2:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 C. Johnson
Solution 2 Bawantha Rathnayaka

Related Questions