Bootstrap中form-group下select控件高度与其他输入框不一致如何解决？

问题原因 #

你所用模板的表单系统已经对普通输入框做了统一高度、内边距的样式适配，但books对应的select选择框没有绑定模板预置的表单统一类，加上浏览器原生对select元素有默认的样式规则，才会出现高度和其他输入框不匹配的问题。

解决方案 #

方案1（最简适配）

直接给select元素添加模板里其他输入框通用的表单类form-control，示例代码如下：

<select name="books" id="books" class="form-control">
  <!-- 你的选项内容 -->
</select>

模板内置的form-control已经统一处理了不同表单元素的高度、内边距、边框样式，修改后就能自动和其他输入框对齐。

方案2（自定义样式覆盖）

如果不想使用模板预置类，可以单独写CSS规则指定该select的样式，和其他输入框保持参数一致即可：

select[name="books"] {
  /* 统一盒模型计算规则，避免内边距撑高元素 */
  box-sizing: border-box;
  /* 和同表单下其他输入框参数保持一致即可，可根据你的模板实际数值调整 */
  height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  /* 可选：清除浏览器默认的select原生样式，避免不同浏览器表现不一致 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

如果清除原生样式后需要保留下拉箭头，可以额外给该元素添加自定义箭头的背景图样式即可。

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