【CSS】单选框的默认样式修改-----input type=‘radio’

使用css 修改 <input type='radio'> 单选框的默认样式

• 直接修改默认样式

先了解使用 css appearance 属性

• appearance属性 为none去除该标签的默认样式，保留其原有功能
• appearance 还有其他值（设置功能不同）

input/radio#styling_radio_inputs–MDN

---

源码

<input type="radio" name="dot" id="" class="dot">

/* 单选框 的默认样式 */
.dot{
	margin: 0 5px;
	/* appearance属性 为none去除该标签的默认样式，保留其原有功能 */
	appearance: none;
	display: block;

	outline: none;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #eee;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	transition: all .2s;
}
/* 设置 单选框 被选中后的样式 */
.dot:checked{
	background-color: rgba(255, 99, 71, 0.568);
	transition: all .2s;
}

效果

• 效果展示

codepen-SAM9029---- 修改 单选框 的默认样式

说明

• 若不使用 appearance:none 单选框就会被默认样式设定
  • 默认样式下 <input type='radio'> 是行内块级元素，（目前了解）只有宽高可设置
  • 默认样式下 backgroundColor border等无法设置
  • 默认样式下 input[type=radio]:checked样式无法设置

---