選擇在Firefox中放置不正確，在chrome / safari中工作

Question

由於某些原因，將我的自定義樣式選擇輸入放置在文本輸入旁邊時，會在Firefox（適用於Chrome / Safari）中向上推。 如果刪除.styled div上的overflow:hidden ，則選擇輸入會彈出回到正確的位置，但具有默認的向下箭頭圖標。

無論如何，我仍然可以隱藏向下箭頭圖標，同時仍然將select元素留在正確的位置？

此處的示例（使用firefox查看正在發生的事情）： http : //jsfiddle.net/Q2sqX/

非常感謝

Answer 1

將vertical-align屬性設置為樣式的middle 。

div.styled { 
    vertical-align: middle; /* Add this */
    display: inline-block;
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(http://www.onextrapixel.com/examples/pure-css-custom-form-elements/formelements-select.png) no-repeat right;
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}

工作示例： http : //jsfiddle.net/Q2sqX/5/

Answer 2

嘗試把

vertical-align: middle;

在您的div.styled規則中