如何将<select>和带填充的元素的高度相等</select>

Question

我想让两个元素都选择＆＃39;和＆＃39;按钮＆＃39;有相同的高度。

JS Fiddle

---

HTML

<select><option>...</option></select><button>Button</button>

CSS

* {
    font-size:100%;
}

select, button {
    border:1px solid gray;
    padding:.4em .6em;
    margin:0;
    //box-sizing:border-box; (did not help...)
}

---

JS Fiddle

现在它看起来像这样：

---

但它应该是这样的：

---

如何通过更改CSS来实现预期的结果？

Answer 1

为按钮添加更大的填充：

button{
   padding: 1px;
}

确保在所有浏览器中元素显示相等。表单元素往往是特定于浏览器的，因此他们可能会谨慎。最好将下拉列表放在假的drowpdown图像上方并使其具有opacity = 0，这样在所有浏览器中你都会获得相同的下拉列表外观。

Answer 2

提供不同的填充..可能是这样的

select, button {
    border:1px solid gray;
    margin:0;
}

select {
    padding:.35em .6em;
}

button {
    padding:.4em .6em;
}

Answer 3

* {
    font-size: 100%;
    box-sizing: border-box;
}

button::-moz-focus-inner {
    border:0;
    padding:0;
}

select, button {
    border: 1px solid gray;
    padding: 5px;
    margin: 0;
}

button {
    padding: 6px;
}

Answer 4

像这样定义身高

select, button {
    border:1px solid gray;
    padding:.4em .6em;
    margin:0;
    height:40px;  // add this line 
}

<强> Demo

Answer 5

select, button {
    border:1px solid gray;
    margin:0;

    padding:0 .6em; //updated
    height:2.3em; //new
    box-sizing:border-box; //new
}