html - 自定义单选按钮边框颜色
问题描述
为我的单选按钮提供不同颜色以及边框颜色的最佳方法?当它单选按钮为真时。
我的代码工作正常,除了收音机为真时的边框颜色。
为 :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;
选中收音机时添加:
.planItem [type="radio"]:checked + label:before {
border: 1px solid #0086D6;
}
希望这会有所帮助。
推荐阅读
- numpy - RuntimeWarning:在 sqrt 中遇到无效值
- javascript - Server Boost Tracker Bot Discord
- javascript - 在 Vercel 无服务器函数中运行 Lighthouse
- javascript - 如何从 Javascript 变量复制到剪贴板
- javascript - ReactJs 功能组件 | 文件输入 | 带表格 | 像 Laravel 一样上传图片
- typescript - TypeScript 禁用错误
- docker - 由 kube-proxy 启用的 ip 转发
- python - 如何在 DJANGO 上返回 PROTECT 字段的消息错误
- wordpress - 允许 Wordpress CPT 的数字段
- c++ - Boost Spirit lexeme vs no_skip