赋予单选按钮不同颜色以及边框颜色的最佳方法?当它单选按钮为真时.
我的代码工作正常,当radio为true时,边框颜色除外.
为: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>
最佳答案
添加边框:1px实线#0086D6;检查收音机时:
.planItem [type="radio"]:checked + label:before {
border: 1px solid #0086D6;
}
希望这会有所帮助.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。