赋予单选按钮不同颜色以及边框颜色的最佳方法？当它单选按钮为真时.
我的代码工作正常,当radio为true时,边框颜色除外.
为：after和：before添加了CSS,请检查以下代码.
.planItem [type="radio"]:checked,.planItem [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.planItem [type="radio"]:checked + label,.planItem [type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 38px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
.planItem [type="radio"]:checked + label:before,.planItem [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 15px;
top: 10px;
width: 15px;
height: 15px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
.planItem [type="radio"]:checked + label:after,.planItem [type="radio"]:not(:checked) + label:after {
content: '';
width: 9px;
height: 9px;
background: #0086D6;
position: absolute;
top: 13px;
left: 18px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.planItem [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.planItem [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.planItem [type="radio"]:checked + label{
background: linear-gradient(315deg,#F9EEFE 0%,#E8F5FF 100%);
}
.planItem [type="radio"] + label {
width: 100%;
padding-top: 10px;
padding-left: 35px;
/*border-bottom: 1px solid #E3E9EC;*/
height: 40px;
}
JSX：
{
this.state.planItems && this.state.planItems.map(function (smsType,i){
return
this.planhandleClick(smsType.id)}/>
{smsType.name}
},this)
}
如何设置边框颜色,如下图所示？
