select行高无法设置，字体下沉

Question

我将select元素和input元素设置了相同的字号、行高、高度、padding大小，input元素显示正常，但是select元素的字体下沉

用浏览器审查元素select
select元素无法更改行高嘛，如果想让select中的文字和input元素表现一致应该如何处理呢？

Answer 1

這是一個好問題，其實我也困惑挺久了。一直以來避開這個問題的方式是只透過 font-size + padding 控制就好

幫補充一下問題，希望有高手能幫忙解釋

這邊有範例程式碼

div
  select
      option A
  input type='text'
  
div
  select class="with-line-height"
      option A
  input type='text' class="with-line-height"

div
  select class="with-line-height-2"
      option A
  input type='text' class="with-line-height-2"

div
  select class="with-line-height-3"
      option A
  input type='text' class="with-line-height-3"

select, input {
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
  background: rgba(pink, .5);
}

 select option{
  background: black;
}

.with-line-height {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
  line-height: 40px;
  vertical-align: middle;
  box-sizing: border-box;
  background: rgba(blue, .5);
}

.with-line-height-2 {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 40px;
  line-height: 60px;
  height: 60px;
  font-style: italic;
  box-sizing: border-box;
  background: rgba(green, .5);
}

.with-line-height-3 {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 40px;
  line-height: 60px;
  height: 60px;
  vertical-align: middle;
  font-style: italic;
  box-sizing: border-box;
  background: rgba(orange, .5);
}

Answer 2

无解，不同浏览器，渲染还不同，还是做个假的替换吧。

Answer 3

select 这个元素，长得丑还不让人说

建议css（+js/jq）模拟