360x640移动端网站下拉框默认选项字体CSS修改无效求助

API 探路者

2026-10-3

问题原因

你之前的修改方案不生效主要有三个原因：

<option> 属于浏览器原生表单控件，内部嵌套的 <span> 样式会被浏览器直接忽略，完全不会生效
你只单独设置了 option 的字体大小，而移动端浏览器默认会优先继承 <select> 元素的字体配置，单独改 option 优先级不够
你用了 Bootstrap 的 .form-select 类，它自带默认的 font-size 样式，覆盖了你写的 option 样式

解决方案

第一步：修改HTML代码

删除所有 <option> 内部嵌套的 <span> 标签，<option> 内直接写文字即可：

<select class="form-select" id="question">
  <option>Select a category : Love,carrer,more ...</option>
  <option>Love</option>
  <option>Carrer</option>
  <option>Marriage</option>
</select>

第二步：添加对应CSS样式

直接给 <select> 元素设置字体大小，option 会默认继承该配置，同时适配移动端兼容性：

/* 核心：给select本身设置字体大小，覆盖bootstrap默认样式 */
.choose-form .form-select {
  font-size: 22px !important; /* 可根据需求调整大小 */
  padding: 10px 14px; /* 调整内边距适配移动端点击范围 */
}

/* 兼容部分安卓浏览器单独设置option字号 */
.choose-form .form-select option {
  font-size: inherit;
  padding: 8px;
}

/* 适配IOS端：防止表单点击时页面自动放大 */
@media screen and (max-width: 768px) {
  select, input, textarea {
    font-size: 16px !important; /* 字号设置为16px及以上即可避免IOS自动缩放 */
  }
}