为何无readonly属性的<select>标签默认匹配CSS :read-only选择器？

问题场景 #

我遇到了这样的情况：下面的CSS代码给<select>标签加上了橙色背景，但根据规范，<select>本身并不支持readonly属性，通常用disabled来实现只读效果，这让我很困惑。

代码如下：

select:read-only {
    background-color: orange;
}

<select>
    <option value="lizard">lizard</option>
    <option value="giraffe">giraffe</option>
    <option value="lion">lion</option>
</select>

核心原因 #

CSS的:read-only伪类的匹配逻辑，不是只看元素有没有readonlyHTML属性——它真正匹配的是用户无法直接修改内容的元素，不管这个元素原生是否支持readonly属性。

对于默认状态下的<select>（没有multiple属性，且size属性为1或不设置）：

• 用户只能从预设的选项中选择，不能像输入框那样直接编辑输入内容，这种“无法直接编辑内容”的状态，就符合:read-only的匹配条件。
• 如果你给<select>加上multiple属性，或者把size设为大于1的值，它就不会被:read-only选中了，因为此时的交互逻辑更偏向于列表选择，不属于“只读不可编辑”的判定范围。

另外要区分:read-only和disabled的差异：

• disabled会让元素完全失去交互能力（不能点击选择，表单提交时也不会传递它的值）；而:read-only匹配的<select>依然可以正常选择选项，提交表单时也会传递选中的值，只是用户不能直接编辑内容。
• 哪怕<select>没有readonly属性，只要它处于用户不可直接修改内容的状态，就会被:read-only选中。

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