用CSS HTML 实现radio组的 自定义样式及效果

目录

理论

CSS

HTML

---

理论

属性	描述
name	字符串,相同name的radio会成组,选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮
checked	布尔值,true表示被选中,false表示未被选中
defaultChecked	用于返回单选按钮 checked 属性的默认值。
id	字符串,唯一标志,常用来和label的for搭配使用

CSS

.forRadio {
	margin-top: 20px;
}

.forRadio .radio-label {
	cursor: pointer;
	display: flex;
	align-items: center;
}

.forRadio input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.forRadio input[type="radio"]+.radio-label:before {
	content: "";
	width: 14px;
	height: 14px;
	display: inline-block;
	margin-right: 8px;
	position: relative;
	top: 1.5px;
	background: #fff;
	border-radius: 100%;
	border: 1px solid #c8c8c8;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
}

.forRadio input[type="radio"]+.radio-label:hover:before {
	border: 1px solid #0c66ff;
}

.forRadio input[type="radio"]:checked+.radio-label:before {
	background-color: #0c66ff;
	box-shadow: inset 0 0 0 3px #f4f4f4;
	border-color: #0c66ff;
}

.forRadio input[type="radio"]:focus+.radio-label:before {
	outline: none;
	border-color: #0c66ff;
}

.forRadio input[type="radio"]:disabled:checked+.radio-label:before {
	box-shadow: inset 0 0 0 3px #f4f4f4;
	border-color: #c8c8c8;
	background: #c8c8c8;
}

.forRadio input[type="radio"]:disabled+.radio-label:before {
	border-color: #c8c8c8;
}

.forRadio input[type="radio"]:disabled+.radio-label {
	color: #c8c8c8;
}

.forRadio input[type="radio"]:disabled:checked+.radio-label {
	color: #c8c8c8;
}

.forRadio input[type="radio"]+.radio-label:empty:before {
	margin-right: 0;
}

HTML

<div class="rowFlex">
	 <div class="forRadio">
          <input type="radio" value="0" name="import" id="automatic" checked="">
          <label for="automatic" class="radio-label">文件导入</label>
     </div>
	 <div class="forRadio">
          <input type="radio" value="1" name="import" id="manual">
          <label for="manual" class="radio-label">手动输入</label>
     </div>
</div>

label 用来和radio配合,当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。