CSS 修改 input 单选框选中的颜色
问题描述:
公司为了统一风格,需要把input 改成统一颜色,纯css修改
解决:
<div class="address-list">
<div class="address-list-item">
<label class="radio" for="diyi" class="label">
<input type="radio" name="address" value="1" id="diyi" style="float:left"><i></i>
<div>
<div class="shouhuo-info">汪汪 <span>17523459962</span></div>
<div class="address-detail">北京市海淀区楼北京市海淀区楼</div>
</div>
</label>
</div>
<div class="address-list-item">
<label class="radio" for="disan" class="label">
<input type="radio" name="address" value="1" id="disan" style="float:left"><i></i>
<div>
<div class="shouhuo-info">汪汪 <span>17523459962</span></div>
<div class="address-detail">北京市1楼北京市海淀区1楼</div>
</div>
</label>
</div>
</div>
CSS代码:
/* 单选换颜色 */ .radio { position: relative; display: inline-block; font-weight: 400; padding-left: 25px; text-align: left; width: 100%; display: flex; } .radio input { position: absolute; left: -9999px; } .radio i { display: block; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; outline: 0; border: 1px solid rgb(133, 133, 133); background: transparent; border-radius: 50%; transition: border-color .3s; -webkit-transition: border-color .3s; } .radio input+i:after { position: absolute; content: ''; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background-color: #ee2e2e; opacity: 0; transition: opacity .1s; -webkit-transition: opacity .1s; } .radio input:checked+i:after { opacity: 1; }
修改之后: