如何自定义radio按钮的样式

自定义radio按钮的样式可以通过CSS实现，主要思路是使用伪元素（:before 或 :after）来创建一个自定义的外观，并通过隐藏原始的radio按钮来达到效果。以下是一个简单的示例：

HTML:

<label class="custom-radio"><input type="radio" name="option" hidden><span>选项1</span>
</label><label class="custom-radio"><input type="radio" name="option" hidden><span>选项2</span>
</label>

CSS:

.custom-radio {position: relative;display: inline-block;margin-right: 15px; /* 根据需要调整间距 */padding-left: 25px; /* 根据自定义radio的大小调整 */line-height: 20px; /* 根据需要调整行高 */cursor: pointer;
}.custom-radio input[type="radio"] {position: absolute;left: 0;top: 0;width: 20px; /* 根据自定义radio的大小调整 */height: 20px; /* 根据自定义radio的大小调整 */opacity: 0; /* 隐藏原始radio */z-index: 1; /* 确保在自定义radio之上 */cursor: pointer;
}.custom-radio:before {content: "";position: absolute;left: 0;top: 0;width: 20px; /* 自定义radio的大小 */height: 20px; /* 自定义radio的大小 */border: 1px solid #ccc; /* 自定义边框样式 */border-radius: 50%; /* 圆形 */background-color: #fff; /* 自定义背景色 */
}.custom-radio input[type="radio"]:checked ~ :before {border-color: #007bff; /* 选中时的边框颜色 */background-color: #007bff; /* 选中时的背景色 */
}.custom-radio input[type="radio"]:checked ~ span {color: #007bff; /* 选中时文字的颜色 */
}/* 可以添加过渡效果，使变化更平滑 */
.custom-radio:before {transition: all 0.3s ease;
}

这个示例中，我们创建了一个自定义的radio按钮，当它被选中时，边框和背景色会改变。同时，你也可以根据需要调整大小、颜色等样式。注意，这个示例使用了CSS的伪元素和兄弟选择器（~）来实现效果。