如何修改美化radio、checkbox的默认样式？

要修改和美化 radio 和 checkbox 的默认样式，前端开发主要有以下几种方法：

1. 使用 CSS 的 appearance 属性 (简单修改):

appearance: none; 可以移除默认样式，让你从零开始设计。但这在跨浏览器兼容性方面存在一些问题，需要针对不同浏览器添加前缀，例如 -webkit-appearance 和 -moz-appearance。

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* ... 其他样式 ... */
}

2. 使用伪元素 ::before 和 ::after (灵活定制):

这是更常用的方法，可以创建自定义的图标或形状。结合 :checked 伪类，可以实现选中状态的样式变化。

input[type="checkbox"] {
    appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    vertical-align: middle; /* 垂直居中对齐 */
    position: relative; /* 用于定位伪元素 */
}

input[type="checkbox"]:checked::before {
    content: '✓';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
}

/* radio 类似，可以用圆圈和实心圆表示 */

3. 使用图片替换 (高度自定义，但维护成本高):

可以用背景图片替换默认样式，实现更精细的视觉效果。需要准备不同状态的图片，并使用 CSS 的 background-image、background-size、background-position 等属性进行设置。

input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background-image: url("unchecked.png");
}

input[type="checkbox"]:checked {
    background-image: url("checked.png");
}

4. 使用 CSS 框架或 UI 库 (快速便捷):

许多 CSS 框架和 UI 库，例如 Bootstrap、Materialize、Ant Design 等，都提供了预定义的样式和组件，可以直接使用或进行简单的定制。

5. 使用 SVG 图标 (矢量图形，缩放不失真):

可以使用 SVG 图标作为 checkbox 和 radio 的背景或内容，实现更灵活的样式控制。

选择哪种方法取决于你的具体需求:

• 对于简单的样式修改，appearance 属性可能足够。
• 对于更复杂的自定义样式，伪元素或图片替换是更好的选择。
• 对于快速开发和一致性，使用 CSS 框架或 UI 库是推荐的做法。
• SVG 图标提供最佳的缩放质量和灵活性。

示例：一个简单的自定义 checkbox 样式:

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s, border-color 0.2s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/