Roxanne Roxanne - 3 months ago 9
CSS Question

CSS: How to add borders of different colors to input radio buttons labels?

I have some radio buttons grouped in a form (they have the same "name" property) and I want to add boxes/borders of different colors around them.Something like this:

Example:

Example

The code for CSS buttons:

.form ul {
list-style: none;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
}
ul li {
color: #4169E1;
display: block;
position: relative;
float: left;
width: 100%;
height: 50px;

}
ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
ul li label {
display: block;
position: relative;
float: left;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 25px;
margin: 1px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label {
color: #6495ED;
}
ul li .check {
display: block;
position: absolute;
border: 5px solid #4169E1;
border-radius: 100%;
height: 21px;
width: 21px;
top: 30px;
/*left: 40px;*/
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #6495ED;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 9px;
width: 9px;
top: 1px;
right: 1px;
left: 1.05px;
bottom: 1.05px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked~ .check {
border: 5px solid #0000FF;
}
input[type=radio]:checked~ .check::before {
background: #0000FF;
}
input[type=radio]:checked~ label {
color: #0000FF;
}


The HTML code:

<form>
<ul id="radioButtons">
<li>
<input type="radio" id="editor_opt1" name="selector" value="Opt1" ></input>
<label for="editor_opt1">Option 1</label>
<div class="check" ></div>
</li>

<li>
<input type="radio" id="editor_opt2" name="selector" value="Opt2" ></input>
<label for="editor_opt2">Option 2</label>
<div class="check" ></div>
</li>
</ul>
</form>


The fiddle: https://jsfiddle.net/steLy9qe/
(which for whatever reason is badly displaced and doesn't look like in my actual page)

Answer

Wrap your input inside your label, then apply styling to the label.

li label {        
    border: 3px solid red;
    margin-bottom: 5px;
    display: inline-block;
    width: 150px;
}
li:nth-child(2) label {
    border-color: green;
}
<form>
    <ul id="radioButtons">
        <li>
            <label>
                <input type="radio" id="editor_opt1" name="selector" value="Opt1">
                Option 1
            </label>
        </li>

        <li>
            <label>
                <input type="radio" id="editor_opt2" name="selector" value="Opt2">
                Option 2
            </label>
        </li>
    </ul>
</form>