html - CSS:如何为输入单选按钮标签添加不同颜色的边框？

Question

我有一些单选按钮分组在一个表单中(它们具有相同的“名称”属性)，我想在它们周围添加不​​同颜色的框/边框。像这样:

例子:

CSS 按钮的代码:

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

HTML代码:

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

fiddle :https://jsfiddle.net/steLy9qe/(无论出于何种原因，它都严重移位并且看起来不像我的实际页面)

Answer 1

将您的输入包裹在标签内，然后将样式应用于标签。

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>