发新话题
打印

css radio表单元素自定义css样式

css radio表单元素自定义css样式

<style>
.radioType {
width: 15px;
height: 15px;
appearance: none;
position: relative;
outline: none;
margin:0 8px;
}
.radioType:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #de0716;
display: inline-block;
border-radius: 50%;
}
.radioType:checked:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #de0716;
display: inline-block;
border-radius: 50%;
}
.radioType:checked:after {
content: "";
width: 9px;
height: 9px;
text-align: center;
background: #de0716;
border-radius: 50%;
display: block;
position: absolute;
top: 4px;
left: 4px;
}
.radioType:checked + label {
color: #edd19d;
}
    </style>

html具体内容
<label><input type="radio" class="radioType">我已阅读<span class="ruleTxt">《***》</span></label>

TOP

发新话题