非multiple属性<select>的<option>标签linear-gradient背景不生效原因

在CSS中为<option>标签设置linear-gradient背景时，发现该样式在不带multiple属性的<select>标签内无法生效，但在带有multiple属性的<select>标签内却能正常显示，这是什么原因？

代码示例 #

CSS：

option {
   background-image: linear-gradient(to top, white, pink);
}

HTML：

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

<select multiple size="3">
  <option>four</option>
  <option>five</option>
  <option>six</option>
</select>

这本质是因为不同类型的<select>控件浏览器渲染机制完全不同：

• 不带multiple的普通下拉<select>，浏览器会调用系统原生的下拉菜单组件来渲染，这类组件的样式完全绑定操作系统的UI框架，浏览器会严格限制自定义CSS的作用范围——像background-image这类样式根本无法渗透到原生下拉组件内部的选项上，你写的CSS会被浏览器直接忽略。

• 带有multiple（或设置了size属性）的<select>，浏览器会把它渲染成一个自主实现的可滚动列表控件，这个控件属于浏览器自身的HTML渲染引擎范畴，而非依赖系统原生组件，所以你给<option>设置的linear-gradient背景样式能够正常被解析和应用。

简单总结：普通下拉选单用的是系统原生UI，样式自由度极低；多选列表用的是浏览器自制的列表控件，支持更多自定义样式。

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