The content of this article is about how to customize the radio button style with css? (Code implementation) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
html part
css style part
.radio {
width: 260px;
height: 26px;
line-height: 26px;
margin: 200px auto;
background-color: #ddeef1;
font-size: 16px;
color: #495060;
text-align: center;
}
label:first-child {
margin-right: 40px;
}
label input, .radio_on {
display: none;
}
.pos {
display: inline;
vertical-align: middle;
}
.radio_bg {
position: relative;
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid #B3B4B8;
border-radius: 50%;
}
label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
border: 1px solid #27B28B;
}
label input:checked + span.pos span.radio_bg .radio_on {
display: inline-block;
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #27B28B;
}Rendering
Related recommendations:
How to beautify the style of HTML checkbox and radio
Detailed example of using CSS to customize radio and checkbox styles
The above is the detailed content of How to customize the radio button style with css? (Code). For more information, please follow other related articles on the PHP Chinese website!
0
2
288
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
