Лучший способ дать другой цвет моей кнопки радио, а также цвет границы? Когда это радио кнопка истина.
Мой код работает нормально, за исключением цвета границы, когда радио - true.
CSS добавлен для: after и: before, пожалуйста, проверьте код ниже.
CSS3:
.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:
<div className = "planItem">
{
this.state.planItems && this.state.planItems.map(function (smsType, i){
return <div className={smsType.id} key={i}><input type="radio" id={smsType.id} name="radio-group-menu" onClick={() => this.planhandleClick(smsType.id)}/>
<label className="mb-0" htmlFor={smsType.id}>{smsType.name}</label>
</div>
}, this)
}
</div>
Как установить цвет границы, как показано на рисунке ниже?
