如何美化单选按钮和复选按钮的样式

最新推荐文章于 2024-09-26 09:17:26 发布

阮太太

最新推荐文章于 2024-09-26 09:17:26 发布

阅读量424

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/96896226

版权

web 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

html文件代码：

 <span>
       <input type="radio" name="number" id="label1" />
    在这里插入代码片`<label for="label1">美化样式</label>
    //利用laberl标签的for属性
 </span>

css样式：

  input[type="radio"] {
				display: inline-block;
				margin-left: -13px;
				margin-top: 2px;
				position: absolute;
				opacity: 10;
				/*visibility: hidden;*/
				clip: rect(0px,0px,0px,0px);
			}
			/*
 			 * 利用before伪元素给label标签添加样式
 			 */
			
			input[type="radio"]+label::before {
				content: "";
				background: #FFFFFF;
				border: 1px solid #a4a4a4;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				float: left;
				margin-right: 1px;
				margin-top: 2px;
			}
			
			input[type="radio"]:checked+label::before {
				background-color: #15aafb;
				border: 1px solid #15aafb;
				background-clip: content-box;
				padding: 3px;
			}