What is the best way to change the color of my radio button along with its border color when the radio button is selected?
My code is functioning properly, except for the border color when the radio button is selected. Below is the CSS code that I have added for :after and :before elements.
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;
}
/* Rest of the CSS code remains unchanged */
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>Is there a way to achieve the desired border color effect as shown in the following image? https://i.sstatic.net/Wam7i.png