zhanghao 2019-12-20
1,第一种样式:
<label> <input class="radio_type" type="radio"/>免费</label> <label> <input class="radio_type" type="radio" />积分</label> <label> <input class="radio_type" type="radio" />现金</label>
.radio_type { width: 20px; height: 20px; appearance: none; position: relative; outline: none; } .radio_type:before { content: ""; width: 15px; height: 15px; border: 1px solid #19874f; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:before { content: ""; width: 15px; height: 15px; border: 1px solid #19874f; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:after { content: ""; width: 9px; height: 9px; text-align: center; background: #19874f; border-radius: 50%; display: block; position: absolute; top: 4px; left: 4px; } .radio_type:checked + label { color: #edd19d; }
第二种样式:
<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/> <label for="radio1">radio1</label> <input class="radio_type" type="radio" name="type" id="radio2" /> <label for="radio2">radio2</label>
label{ line-height: 20px; display: inline-block; margin-left: 5px; margin-right:15px; color: #777; } .radio_type{ width: 20px; height: 20px; appearance: none; position: relative; } .radio_type:before{ content: ‘‘; width: 20px; height: 20px; border: 1px solid #7d7d7d; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:before{ content: ‘‘; width: 20px; height: 20px; border: 1px solid #c59c5a; background:#c59c5a; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:after{ content: ‘‘; width: 10px; height:5px; border: 2px solid white; border-top: transparent; border-right: transparent; text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg); } .radio_type:checked+label{ color: #c59c5a; }