CodeIgniter中设置<option>高度无效问题排查求助

嘿，这个问题我之前也碰到过——你用$("option").css("height", "50px");没效果，根本原因不是CodeIgniter的问题，而是浏览器对原生<option>元素的样式控制非常严格，直接设置height基本不会生效，具体原因和解决办法如下：

问题根源 #

• 浏览器为了保持下拉选择器的原生统一体验，会强制接管<select>和<option>的部分样式，其中就包括高度。像Chrome、Edge（Windows端）、Safari这些主流浏览器，都会忽略对<option>的height属性设置。
• 就算少数浏览器（比如Firefox）支持，效果也和其他浏览器不一致，完全没有跨浏览器兼容性可言。

可行的解决方案 #

1. 使用自定义下拉组件（推荐） #

放弃原生<select>，用HTML+CSS+JS模拟一个下拉菜单，这样就能完全控制每个选项的样式，包括高度。这里给你一个简化版的实现示例：

<!-- 原生select隐藏，用于表单提交时传值 -->
<select id="nativeSelect" style="display: none;">
  <option value="opt1">选项一</option>
  <option value="opt2">选项二</option>
  <option value="opt3">选项三</option>
</select>

<!-- 自定义下拉容器 -->
<div class="custom-dropdown">
  <div class="dropdown-trigger">请选择选项</div>
  <div class="dropdown-options">
    <div class="dropdown-option" data-value="opt1">选项一</div>
    <div class="dropdown-option" data-value="opt2">选项二</div>
    <div class="dropdown-option" data-value="opt3">选项三</div>
  </div>
</div>

<style>
.custom-dropdown .dropdown-trigger {
  height: 50px;
  line-height: 50px;
  border: 1px solid #ddd;
  padding: 0 15px;
  cursor: pointer;
  background: #fff;
}
.custom-dropdown .dropdown-options {
  display: none;
  border: 1px solid #ddd;
  border-top: none;
}
.custom-dropdown .dropdown-option {
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  cursor: pointer;
  background: #fff;
}
.custom-dropdown .dropdown-option:hover {
  background: #f5f5f5;
}
</style>

<script>
// 点击触发器切换选项列表显示/隐藏
$(".dropdown-trigger").on("click", function() {
  $(".dropdown-options").toggle();
});

// 点击选项更新原生select值，并关闭列表
$(".dropdown-option").on("click", function() {
  const value = $(this).data("value");
  const text = $(this).text();
  $("#nativeSelect").val(value);
  $(".dropdown-trigger").text(text);
  $(".dropdown-options").hide();
});
</script>

2. 间接设置<select>的line-height（快速临时方案） #

如果不想折腾自定义组件，可以试试给<select>设置line-height，部分浏览器会同步拉高<option>的显示高度，虽然不是直接设置<option>的height，但能达到类似效果：

$("select").css("line-height", "50px");

注意：这个方法的兼容性不稳定，比如在Mac端的Chrome可能效果不明显，只能作为临时妥协方案。

3. 特定浏览器的CSS hack（不推荐） #

比如Firefox支持直接设置<option>的height，但其他浏览器不支持，代码如下：

/* 仅Firefox生效 */
@-moz-document url-prefix() {
  option {
    height: 50px !important;
  }
}

这种方案局限性太大，不建议在生产环境使用。

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