如何让CSS transform:scale()效果传递到select的option标签？

<option>是浏览器/操作系统提供的原生UI组件，并非由标准CSS渲染的普通DOM元素。浏览器会直接调用系统自带的下拉列表渲染逻辑，忽略transform:scale()这类自定义CSS属性，所以无法继承顶层元素的缩放效果。

方案1：替换原生select为自定义下拉组件 #

用普通DOM元素（div、ul/li）模拟下拉框，完全自定义样式，彻底摆脱原生控件的限制，所有元素都能响应transform:scale()。示例代码：

<div class="custom-select">
  <div class="select-header">请选择选项</div>
  <ul class="select-options">
    <li class="option-item">选项A</li>
    <li class="option-item">选项B</li>
    <li class="option-item">选项C</li>
  </ul>
</div>

配合CSS实现下拉展开/收起逻辑，整个组件的缩放完全受顶层transform控制。

方案2：按缩放比例单独设置option的字体大小 #

如果保留原生select，可根据顶层元素的缩放比例，直接给<option>设置对应倍数的字体大小。比如顶层缩放1.2倍：

/* 顶层缩放容器 */
.content-container {
  transform: scale(1.2);
  transform-origin: top left;
}
/* 按比例设置option字体 */
.content-container select option {
  font-size: 1.2em;
}

注意：不同浏览器对<option>的字体大小支持有差异，移动端部分浏览器可能不生效。

方案3：使用zoom属性替代transform:scale #

zoom是非标准CSS属性，但部分浏览器（如Chrome）会缩放包括原生控件在内的整个元素，对<option>的缩放效果更直接：

.content-container {
  zoom: 1.2;
}

缺点：缩放原点无法灵活自定义，可能影响整体布局定位，兼容性不如transform。

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