如何用一个原生css编写单选框,自定义样式
这是普通的单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css单选框</title>
<style type="text/css">
</style>
</head>
<body>
<span>单选框</span>
<input type="radio" name="rd" />
<input type="radio" name="rd" />
<input type="radio" name="rd" />
</body>
</html>
input标签单选框
下面是自定义样式的单选框
<style type="text/css">
label {
float: left;
margin: 0 20px;
/* 给父元素label开启相对定位 */
position: relative;
overflow: hidden;
}
label div{
/* 用于自定义改变单选框的样式 */
width: 200px;
height: 200px;
border-radius: 50%;
background-color: pink;
}
label input[type="radio"]{
/* 给input单选框移到label外界,然后选择隐藏 */
position: absolute;
left: -9999px;
}
input:checked ~div{
/* 设定input 选中,兄弟元素div的样式 */
background-color: deeppink;
}
</style>
</head>
<body>
<div>单选框:</div>
<label>
<input type="radio" name="rd" />
<div id=""></div>
</label>
<label>
<input type="radio" name="rd" />
<div id=""></div>
</label>
<label>
<input type="radio" name="rd" />
<div id=""></div>
</label>
</body>
效果展示
步骤
- 在input外面包上label标签,这样点击label就可以选中对应的 单选框。
- 给input标签添加兄弟元素div 用来设定自定义单选框的样式
- 给input兄弟div添加样式。
- 给 label开启相对定位, input开启绝对定位。然后把input移到label外面
- 然后把input移到label外面,label设置overflow:hidden
- input选中时通过设定兄弟选择器更改div的样式