使用:default伪类可设置表单默认选项样式，如为默认选中的单选按钮添加蓝色边框；还可结合背景色、文字色和阴影等css属性提升视觉效果；现代浏览器兼容性良好，老旧浏览器可用javascript添加is-default类模拟；动态生成元素时需在创建时标记is-default类；:default针对初始状态，:checked反映当前选中状态，应根据需求选择使用。
HTML设置默认选项样式，主要靠CSS来实现。
:default伪类能帮我们选中表单中默认被选中的元素，然后就能针对它们设置样式了。
解决方案：
:default伪类主要用于
<button>、
<input type="checkbox">、
<input type="radio">和
<option>这几个元素。它可以让你区分默认选中的选项，并给它们应用特定的样式。这在用户体验上很重要，能让用户更清晰地了解哪些是初始设置。
举个例子，假设你有一个单选按钮组，其中一个选项默认被选中，你可以这样写CSS：
立即学习“前端免费学习笔记（深入）”；
input[type="radio"]:default {
outline: 2px solid blue; /* 给默认选中的单选按钮添加蓝色边框 */
}这段代码会给默认选中的单选按钮添加一个蓝色的边框，让它更醒目。
如何利用CSS提升表单默认选项的视觉效果？
除了简单的边框，你还可以使用其他CSS属性来提升默认选项的视觉效果。比如，你可以改变背景颜色、文字颜色，甚至添加阴影效果。
例如：
input[type="checkbox"]:default {
background-color: lightgreen; /* 默认选中的复选框背景色变为浅绿色 */
color: white; /* 默认选中的复选框文字颜色变为白色 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}这样，默认选中的复选框会更加突出，用户一眼就能看到。记住，选择合适的颜色和效果很重要，要保证视觉效果清晰易懂，不要过于花哨，影响用户体验。
:default伪类在不同浏览器中的兼容性如何？
:default伪类在现代浏览器中的兼容性很好，包括 Chrome、Firefox、Safari 和 Edge 等。但是，对于一些较老的浏览器版本，可能不支持这个伪类。
为了确保在所有浏览器中都能获得一致的视觉效果，你可以使用一些 JavaScript 技巧来模拟
:default伪类的行为。
例如：
window.onload = function() {
var defaults = document.querySelectorAll('input[type="radio"]:default, input[type="checkbox"]:default');
for (var i = 0; i < defaults.length; i++) {
defaults[i].classList.add('is-default');
}
};这段代码会在页面加载完成后，找到所有默认选中的单选按钮和复选框，并给它们添加一个
is-default类。然后，你就可以使用 CSS 来设置
is-default类的样式了：
.is-default {
outline: 2px solid blue; /* 给默认选中的单选按钮和复选框添加蓝色边框 */
}这种方法可以确保在所有浏览器中都能获得一致的视觉效果。虽然需要一些额外的 JavaScript 代码，但它可以提高你的网站的兼容性。
如何处理动态生成的表单元素，并保持默认选项的样式？
如果你的表单元素是动态生成的，比如通过 JavaScript 从服务器获取数据后动态添加到页面中，那么就需要特别注意
:default伪类的应用。因为在页面加载时，这些元素可能还不存在，所以
:default伪类可能无法正确地选中它们。
一种解决方案是在动态生成表单元素后，手动添加一个类来标记默认选项。例如：
// 假设 data 是从服务器获取的数据
data.forEach(function(item) {
var input = document.createElement('input');
input.type = 'radio';
input.name = 'options';
input.value = item.value;
if (item.isDefault) {
input.checked = true; // 设置为选中状态
input.classList.add('is-default'); // 添加 is-default 类
}
// 将 input 添加到页面中
});然后，在 CSS 中使用
is-default类来设置默认选项的样式：
input[type="radio"].is-default {
outline: 2px solid blue; /* 给默认选中的单选按钮添加蓝色边框 */
}这样，即使表单元素是动态生成的，也能保证默认选项的样式正确显示。关键在于在生成元素时，显式地标记出默认选项，并应用相应的样式。
:default伪类与
:checked伪类有什么区别？何时应该使用哪个？
:default和
:checked都是 CSS 伪类，但它们的用途不同。
:default用于选中表单中默认被选中的元素，而
:checked用于选中当前被选中的元素，无论它是否是默认选项。
简单来说，
:default关注的是元素的初始状态，
:checked关注的是元素的当前状态。
例如，对于一个单选按钮组，
:default只会选中默认选中的那个按钮，而
:checked会选中用户当前选择的按钮。
何时使用哪个伪类取决于你的需求。如果你想给默认选项设置特定的样式，就应该使用
:default。如果你想给当前选中的选项设置样式，就应该使用
:checked。
例如：
input[type="radio"]:default {
outline: 2px solid blue; /* 给默认选中的单选按钮添加蓝色边框 */
}
input[type="radio"]:checked {
background-color: yellow; /* 给当前选中的单选按钮添加黄色背景 */
}这段代码会给默认选中的单选按钮添加蓝色边框，给当前选中的单选按钮添加黄色背景。这样，用户可以清楚地看到哪些是默认选项，哪些是他们自己选择的选项。
