如何调整select下拉框option的高度以匹配原有旧布局？

我现有一个select下拉选项列表，但当前下拉框的高度超出实际需求，请问应当如何调整option的位置与高度，使其与旧布局效果匹配？

当前实现效果 #

对应代码 #

<div>
 <div class="row">
 <div class="col-md-2">匹配类型</div>
 <div class="col-md-4">
  <div>
    <select class="form-control" [(ngModel)]="singleRecordMatchBean.matchType">
      <option value="undefined" [disabled]="true" >---请选择---</option>
      <option *ngFor="let object of defaultOptions.MATCHES" [ngValue]="object.code" 
      >{{object.desc}}</option> 
    </select>
  </div>
</div>
<div class="col-md-2" style="color: red; font-size: 0.93em;white-space: pre-wrap;">*必填</div>

期望实现效果 #

你用的是Bootstrap的form-control样式类，它自带的默认内边距、行高会把select撑得比预期高，按下面的方法调整即可：

• 给select节点新增自定义样式类，比如命名为match-select，覆盖默认样式：

/* 调整select本体的高度 */
.match-select.form-control {
  height: 32px; /* 可根据旧布局实际高度调整数值 */
  padding: 2px 8px;
  line-height: 1.2;
  font-size: 14px;
}
/* 调整下拉选项的单条高度 */
.match-select.form-control option {
  height: 26px;
  padding: 3px 8px;
  line-height: 26px;
}

• 如果需要限制下拉展开后的整体最大高度，避免选项过多时下拉列表过长，可以补充以下样式：

.match-select.form-control {
  overflow-y: auto;
  /* 下拉展开最大高度，超出后自动出现滚动条 */
  max-height: 180px;
}

• 如果遇到个别浏览器对原生option样式支持不佳的情况，可以替换为对应框架的模拟下拉组件，就能完全自定义样式实现1:1还原旧布局。

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