CSS设置select下拉框option字体大小不生效问题求助

核心原因 #

原生<select>展开后的下拉选项面板是浏览器/操作系统层面渲染的原生控件，不属于普通网页DOM节点，常规CSS直接给option设置字体属性，在大部分浏览器中会被系统默认样式覆盖，无法直接生效。

排查&解决步骤 #

• 第一步：先排查基础样式问题
  打开浏览器开发者工具，选中对应option元素，查看右侧样式面板：
  • 确认你写的CSS选择器是否命中元素，类名是否拼写正确（注意你代码里的容器类名是shopengine-category-select-wraper，不要误拼成wrapper）
  • 如果你的样式规则被划掉，说明优先级不够，给规则加!important，或者提升选择器权重，同时把select元素本身也加上相同字体规则（部分浏览器会让option继承select的字体样式）：

  .shopengine-category-select-wraper select.shopengine-ele-nav-search-select,
  .shopengine-category-select-wraper select.shopengine-ele-nav-search-select option {
      font-size: 30px !important;
      font-family: 'Roboto', sans-serif !important;
  }
  

  该方案仅在部分Chromium内核浏览器生效，Windows端Firefox、Mac端Safari对原生控件的样式限制更严格，可能依然不生效。
• 第二步：清除原生控件默认渲染
  给select添加appearance: none属性，告知浏览器不要调用系统原生样式渲染下拉控件，此时option的自定义样式即可生效，注意需要手动补全下拉箭头样式，否则原生箭头会消失：

  .shopengine-category-select-wraper select {
      /* 清除各浏览器原生下拉样式 */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      /* 自定义下拉箭头，可替换为自己的图标 */
      background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
      padding-right: 40px;
      /* 字体样式 */
      font-size: 30px;
      font-family: 'Roboto', sans-serif;
  }
  .shopengine-category-select-wraper select option {
      font-size: 30px;
      font-family: 'Roboto', sans-serif;
  }
  

• 第三步：完全自定义方案（跨浏览器100%生效）
  如果需要所有浏览器下样式完全一致，放弃原生select控件，用div+列表标签模拟下拉结构，配合JS实现展开收起、选项选中、值同步的逻辑，这种实现方式不存在原生控件限制，所有样式都可以自由定义。

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