如何使輸入和選擇看起來不錯，旁邊有自定義高度eachother？

假設我有following html and style：如何使輸入和選擇看起來不錯，旁邊有自定義高度eachother？

HTML

<div id="container"> 
    <input type="text"/> 
    <select><option>val</option></select> 
</div>

CSS

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

input, select { 
    width: 50%; 
    float: left; 
    height: 3em; 
    line-height: 3em; 
}

我怎樣才能使輸入和選擇好看嗎？在Firefox中，選擇的高度很好，但文字val寫在選擇的頂部，在webkit瀏覽器中，選擇的高度不變。

有沒有什麼辦法可以將這些選擇和輸入用自定義高度設置爲在大多數現代瀏覽器（firefox，webkit，opera，> = IE8也許？）中看起來不錯？

來源

2013-06-28 Markus

請參照這些。 HTTP：//計算器。com/questions/8189668/why-does-select-have-a-slightly-height-height-than-inputtype-text http://stackoverflow.com/questions/9767612/issue-with-input-select-tag -height-in-form http://stackoverflow.com/questions/4561798/same-size-widthxheight-for-input-and-select – Nitesh

選擇框是對風格的變化衆所周知的抗 - 即使你設法申請你想在一個瀏覽器，它幾乎可以保證不看在另一個工作。甚至不要讓我開始使用移動設備。

很多人最近一直在使用一種解決方法 - 隱藏<select>元素，並將其替換爲使用javascript來模仿<select>行爲的純HTML結構。從那裏，HTML很多很多比原生<select>更容易風格。

有很多插件（跨越大多數JavaScript庫）這樣做，但迄今爲止我發現的最好的是SelectBoxIt。它非常易於使用，具有通用瀏覽器和移動支持，並提供一些非常先進的選項。唯一的麻煩是它需要jQuery。

http://gregfranko.com/jquery.selectBoxIt.js/

來源

2013-06-28 15:36:35 CodeMoose

您可以使用padding：http://jsfiddle.net/Ldftk/2/

似乎它在我的Firefox的排序，我也從來沒有的line-height風扇和移除。但是，如果你需要它然後去做。

根據我的經驗，在Mac上，選擇列表似乎沒有記錄任何高度或填充，除非它們有一些border..類型屬性集。例如

border: none;或border-radius: 0px;。只有一個似乎有需要生效

來源

2013-06-28 09:49:17 Novocaine

okey，'border-radius：0'他們會採取高度並適用於Chrome/safari/webkit，很好！但在mac上的firefox中，'val'在你的小提琴中被水平切割。和'border-radius：0'使選擇看起來很醜，所以也許有更好的Firefox解決方案？ – Markus

如果你增加身高，你應該能夠阻止它切斷閥值。你當然可以使用邊界半徑的實際值，而不是將其設置爲0，或者設置'border'屬性 – Novocaine

我改變了標題而不是明確依靠這兩個元素的高度，並認爲我自己找到了一個解決方案用'display：table'使它們看起來更好。儘管感謝高度的幫助！ – Markus

我剛剛纔與display: tablehere之類的工作：

#container { 
    display: table; 
    width: 20em; 
} 

input, select { 
    width: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 

input { 
    height: 3em; 
}

選擇的高度沒有改變，但至少它與對齊垂直居中輸入文本。這樣select的樣式是每個兄弟的規則，但它看起來更好，然後在中間不垂直對齊。

來源

2013-06-28 10:39:32 Markus

使用一個很好的重置CSS和單獨應用CSS這樣

input[type="text"]{ 
/* 
style goes here 
*/ 
} 

select{ 
/
}

來源

2013-06-28 13:21:50

如何使輸入和選擇看起來不錯，旁邊有自定義高度eachother？

回答

相關問題