CODEWITHSUNDEEP
htmlcss
RMS
RMS

Reputation: 1430

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)

Upvotes: 0

Views: 821

Answers (3)

antidecaf
antidecaf

Reputation: 197

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>

Upvotes: 1

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

You can use css nth-child property to access the li

    ul li:nth-child(1){
      border:1px solid red;
    }
    ul li:nth-child(2){
      border:1px solid blue;
    }
     ul li:first-child{
      border:1px solid red;
    }
 ul li:last--child{
      border:1px solid red;
    }

Upvotes: 0

roberrrt-s
roberrrt-s

Reputation: 8210

:nth-of-type() should be of service.

li:nth-of-type(odd) label {
  border: 2px solid #F00;
}
li:nth-of-type(even) label {
  border: 2px solid #0F0;
}

This styles the label of every odd and even list item in succession differently.

In your case

Upvotes: 0

Related Questions