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

qq_45637785

于 2019-10-19 14:19:47 发布

阅读量254

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45637785/article/details/102637641

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做东湖大数据的大数据众包的一个页面时，遇到了一个地方需要自定义radio按钮，于是我在优快云搜索相关文章，恰巧就搜到了一篇教自定义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&#

最低0.47元/天解锁文章