如何用一个原生css编写单选框，自定义样式

最新推荐文章于 2024-01-05 09:40:20 发布

SeanHit

最新推荐文章于 2024-01-05 09:40:20 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/l_x_cser/article/details/104401221

版权

如何用一个原生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的样式

SeanHit

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何用一个原生css编写单选框，自定义样式

如何用一个原生css编写单选框，自定义样式这是普通的单选框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css单选框</title> <style type="text/css"> </style>...
复制链接

扫一扫