<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio{
position: relative;
margin-right: 12px;
}
.radio input {
width: 30px;
height: 30px;
appearance: none;
-webkit-appearance: none;
opacity: 0;
outline: none;
}
.radio label {
border-radius: 50%;
position: absolute;
left: 0;
top: 10px;
width:30px;
height:30px;
border: 1px solid blue;
}
.radio input:checked+label::after {
content: "";
position: absolute;
width: 33px;
height:33px;
margin-left: -1.5px;
background: url('./img/duihao.png');
background-size: 100% 100%;
}
</style>
</head>
<body>
<p class="radio"><input type="radio" id="sex1" name="sex" checked><label for="sex1"></label>一</p>
<p class="radio"><input type="radio" id="sex2" name="sex"><label for="sex2"></label>二</p>
</body>
</html>
【demo】input单选框更改成打对号的样式
于 2022-11-07 22:23:50 首次发布