为何代码选中select选项与用户点击选中的背景色存在差异？

使用如下HTML代码：

<select id="s" size=3>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

当用户手动点击选中选项时，选项背景为经典深蓝色；但通过代码编程选中（比如以下两种方式）时，背景色显示为灰色：

// 方式1
document.getElementById('s').getElementsByTagName('option')[1].selected = 'selected'

// 方式2
document.getElementById('s').selectedIndex = 1;

旧版Firefox中无论选中方式如何，背景色始终为深蓝色；但新版Firefox和Google Chrome中出现上述差异。

一、为什么会出现样式差异？ #

现代浏览器（新版Firefox、Chrome）会区分用户交互触发的选中和脚本触发的选中：

• 用户手动选中时，浏览器会走完整的用户交互流程，标记为「用户主动选择」，应用系统默认的高亮样式（深蓝色）。
• 脚本触发选中时，浏览器仅修改了选项的selected属性，但没有触发用户交互相关的UI状态标记，因此使用「非用户交互选中」的样式（灰色）。

旧版Firefox没做这种区分，是因为当时的浏览器UI逻辑还没细化这两种选中场景。

二、除了循环重置背景色，有没有其他修复方法？ #

有两种更简洁的方案：

1. 触发用户交互类事件
   在脚本选中后，手动触发focus或模拟点击事件，让浏览器判定为用户交互导致的选中：

const selectEl = document.getElementById('s');
selectEl.selectedIndex = 1;
// 触发focus，唤起用户交互样式
selectEl.focus();

如果要更贴近真实点击效果，也可以模拟点击选项：

const optionEl = document.getElementById('s').options[1];
optionEl.selected = true;
// 模拟点击事件
optionEl.dispatchEvent(new MouseEvent('click', { bubbles: true }));

2. CSS强制统一样式
   通过自定义CSS覆盖浏览器默认的区分样式：

#s option:checked {
    background-color: #0052cc !important; /* 经典深蓝色 */
    color: white;
}

添加!important是为了确保优先级高于浏览器内部样式。

三、浏览器为什么要区分这两种样式？ #

核心是为了提升交互清晰度：

• 让用户能直观区分「自己主动选的内容」和「页面脚本自动设的内容」，避免混淆。比如表单自动填充、页面初始化设置选中项时，用户能快速识别这不是自己的操作结果。
• 符合现代交互设计逻辑，通过视觉反馈区分「用户主动行为」和「系统/脚本行为」，帮助用户理解页面状态变化的来源。

内容的提问来源于stack exchange，提问作者MirrorMirror