html-自定义单选按钮边框颜色

概述赋予单选按钮不同颜色以及边框颜色的最佳方法？当它单选按钮为真时.我的代码工作正常,当radio为true时,边框颜色除外.      为：after和：before添加了CSS,请检查以下代码.CSS3：.planItem [type='radio']:checked, .planItem [type='radio']:not(:checked) {

赋予单选按钮不同颜色以及边框颜色的最佳方法？当它单选按钮为真时.

我的代码工作正常,当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;}

希望这会有所帮助. 总结

以上是内存溢出为你收集整理的html-自定义单选按钮边框颜色 全部内容，希望文章能够帮你解决html-自定义单选按钮边框颜色 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。