radio元素样式修改 css

最新推荐文章于 2022-07-15 14:47:41 发布

小七你过来

最新推荐文章于 2022-07-15 14:47:41 发布

阅读量295

点赞数

分类专栏： css 备忘

备忘同时被 2 个专栏收录

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

该博客主要围绕Radio样式的修改展开，运用CSS技术对其样式进行调整，以满足不同的设计需求，属于前端开发中样式设计的范畴。

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

<label class="radioBox" >
	 <input id="item1" type="radio" name="in_out" value="0" checked>
	<label for="item1"></label>
	进入
</label>
<label class="radioBox">
	 <input id="item2" type="radio" name="in_out" value="1">
	 <label for="item2"></label>
	 离开
</label>

                      .radioBox {
						  position: relative;
						  line-height: 30px;
						}

						input[type="radio"] {
						  width: 20px;
						  height: 20px;
						  opacity: 0;
						}

						label {
						  position: absolute;
						  left: 5px;
						  top: 8px;
						  width: 20px;
						  height: 20px;
						  border-radius: 50%;
						  border: 1px solid #999;
						}

						/*设置选中的input的样式*/
						/* + 是兄弟选择器,获取选中后的label元素*/
						input:checked+label {
						  background-color: #fff;
						}

						input:checked+label::after {
						  position: absolute;
						  content: "";
						  width: 5px;
						  height: 10px;
						  top: 3px;
						  left: 6px;
						  border: 2px solid #0C80FD;
						  border-top: none;
						  border-left: none;
						  transform: rotate(45deg)
						}