"```markdown

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

在Web开发中，默认的radio和checkbox样式通常不符合设计需求。通过CSS，我们可以美化这些输入元素，使其更符合现代设计风格。以下是一些实现方法。

1. 隐藏默认的radio和checkbox

首先，使用CSS隐藏默认的radio和checkbox元素。可以通过设置opacity和position来实现。

input[type=\"radio\"],
input[type=\"checkbox\"] {
    opacity: 0;
    position: absolute;
}

2. 创建自定义样式

接下来，使用伪元素::before和::after来创建自定义样式。我们可以为checkbox和radio添加背景、边框和状态指示。

Checkbox样式

<label class=\"custom-checkbox\">
    <input type=\"checkbox\" />
    <span class=\"checkmark\"></span> 选择我
</label>

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #007BFF;
    border-radius: 4px;
    position: relative;
    margin-right: 10px;
    transition: background 0.3s;
}

input[type=\"checkbox\"]:checked + .checkmark {
    background-color: #007BFF;
}

input[type=\"checkbox\"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

Radio样式

<label class=\"custom-radio\">
    <input type=\"radio\" name=\"options\" />
    <span class=\"radiomark\"></span> 选项1
</label>
<label class=\"custom-radio\">
    <input type=\"radio\" name=\"options\" />
    <span class=\"radiomark\"></span> 选项2
</label>

.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.radiomark {
    width: 20px;
    height: 20px;
    border: 2px solid #007BFF;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    transition: background 0.3s;
}

input[type=\"radio\"]:checked + .radiomark {
    background-color: #007BFF;
}

input[type=\"radio\"]:checked + .radiomark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

3. 响应式设计

确保自定义的checkbox和radio在各种屏幕尺寸下都能正常显示。可以使用媒体查询来调整大小和间距。

@media (max-width: 600px) {
    .checkmark, .radiomark {
        width: 16px;
        height: 16px;
    }
}

4. 可访问性

为确保可访问性，添加aria属性和正确的标签，以便屏幕阅读器能识别这些自定义的输入元素。

<label class=\"custom-checkbox\" aria-label=\"选择我\">
    <input type=\"checkbox\" aria-hidden=\"true\"/>
    <span class=\"checkmark\" aria-hidden=\"true\"></span> 选择我
</label>

使用HTML和CSS的组合，可以有效地修改和美化默认的radio和checkbox样式，创造出更符合用户体验和设计需求的输入元素。这些方法不仅提高了视觉美感，还确保了可用性和可访问性。

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