为我的单选按钮和边框颜色提供不同颜色的最佳方法?当它的单选按钮为真时。
我的代码工作正常,除了 radio 为真时的边框颜色。
为 :after 和 :before 添加了 CSS,请检查下面的代码。
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>
最佳答案
添加border: 1px solid #0086D6;
当radio被选中时:
.planItem [type="radio"]:checked + label:before {
border: 1px solid #0086D6;
}
希望这会有所帮助。
关于html - 自定义单选按钮边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54103232/