html自定义radio checkbox样式

来源：互联网发布：教务系统数据库设计编辑：程序博客网时间：2024/05/18 19:40

思路一：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="radio"] {
display: none;
}
.sex-label {
margin-left: 20px;
position: relative;
}
.sex-label::before{
content: '';
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
border: 1px solid #ccc;
position: absolute;
left: -20px;
top: 0.2em;
box-sizing: border-box;
padding: 0.2em;
}
.sex-label.radio-check::before{
background: red;
background-position: center center;
background-clip: content-box;
}
</style>
</head>
<body>
<label class="sex-label" for="boy" >男生</label>
<input type="radio" id="boy" name="sex">
<label class="sex-label" for="girl">女生</label>
<input type="radio" id="girl" name="sex">
<script>
document.getElementsByClassName('sex-label')[0].onclick = function(event) {
// this.classList.add('radio-check')
console.log(this.classList)
if(this.classList.value.indexOf('radio-check') > 0){
this.classList.remove('radio-check');
}else {
this.classList.add('radio-check');
}
}
</script>
</body>
</html>

思路2：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="radio"] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 1px solid #666;
border-radius: 50%;
}
input[type="radio"]:checked{
background-color: red;
}

</style>
</head>
<body><input type="radio" id="boy" name="sex">
<label class="sex-label" for="boy" >男生</label>

<label class="sex-label" for="girl">女生</label>
<input type="radio" id="girl" name="sex">
</body>
</html>

阅读全文

1 0