Roxanne Roxanne - 1 year ago 40
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 Source

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>