html把单选框改变样式

最新推荐文章于 2025-10-11 09:56:40 发布

原创最新推荐文章于 2025-10-11 09:56:40 发布 · 7.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS自定义Radio按钮的样式，包括改变标签的大小、位置、背景颜色等，通过伪元素和属性选择器实现不同状态下的视觉效果。文章提供了完整的代码示例，并附有相关资源链接。

以下是成功的源代码!

<head>
	<style type="text/css">
		/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
		input[type="radio"] + label::before 
		{
			content: "\a0";  /*不换行空格*/
			display: inline-block;
			vertical-align: .2em;
			width: .8em;
			height: .8em;
			margin-right: .2em;
			border-radius: .2em;
			background-color: silver;
			text-indent: .15em;
			line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
		}
		input[type="radio"]:checked + label::before 
		{
			content: "\2713";
			background-color: yellowgreen;
		}
		input 
		{
			position: absolute;
			clip: rect(0, 0, 0, 0);
		}
		input[type="radio"]:focus + label::before 
		{
			box-shadow: 0 0 .1em .1em #58a;
		}
		input[type="radio"]:disabled + label::before 
		{
			background-color: gray;
			box-shadow: none;
			color: #555;
		}
	</style>
</head>
<body background="1.jpg"  style="padding: 10%">
	<div>
		<input type="radio" id="awesome0" name="mode" />
		<label for="awesome0">Awesome!</label>
		<input type="radio" id="awesome1" name="mode" />
		<label for="awesome1">Awesome!</label>
		<input type="radio" id="awesome2" name="mode" />
		<label for="awesome2">Awesome!</label>
	</div>
</body>