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

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

原创最新推荐文章于 2024-01-05 09:40:20 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #前端

本文详细介绍如何使用原生CSS自定义单选框样式，包括使用label和div元素实现自定义样式，以及如何通过兄弟选择器更改选中状态的样式。

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