看别人文章学自定义radio样式遇到的问题及解决办法

最新推荐文章于 2024-03-22 13:55:25 发布

qq_45637785

最新推荐文章于 2024-03-22 13:55:25 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/qq_45637785/article/details/102637641

版权

在制作大数据众包页面时，遇到自定义radio样式挑战。通过学习CSDN文章，初试代码存在样式遗漏，如漏写`content: "";`。修复后，发现选中无响应，通过补充input的id和label的for属性解决。进一步问题包括布局对齐，通过调整`box-sizing`、`float`和`display`属性得以纠正。对于`clip`和`background-clip`的疑惑，了解到它们在绝对定位和内容裁剪中的应用。

摘要由CSDN通过智能技术生成

在做东湖大数据的大数据众包的一个页面时，遇到了一个地方需要自定义radio按钮，于是我在CSDN搜索相关文章，恰巧就搜到了一篇教自定义radio得1文章，然后我在大致看懂原理后开是仿照他的代码打。下面的是初次代码，问题很多。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type=radio]{
				clip: rect(0,0,0,0);
				position: absolute;
			}
			input[type=radio]+label::before{
				/*漏1*/
				content: "";
				background:#fff;
				border: solid red 1px;
				width: 15px;
				height: 15px;
				border-radius:50%;
				float: left;
				margin-left:6px ;
				margin-top: 5px;
			}
			/*添加选中样式*/
			input[type=radio]:checked+label::before{
				background-color: skyblue;
				background-clip: content-box;
				padding: 3px;
			}
		</style>
	</head>
	<body>
		<input type="radio" name="1"/>
		<label>hahaha</label>
		<input type="radio&#