爲什麼select元素不像其他表單元素那麼寬？

如果將select和text輸入設置爲相同寬度，則select元素的寬度總是比文本輸入的寬度小几個像素。無論我是以像素還是百分比來設置寬度，都會發生這種情況。有誰知道爲什麼？有什麼辦法可以防止這種情況發生？爲什麼select元素不像其他表單元素那麼寬？

最小演示：http://codepen.io/nosecreek/pen/wehKu

測試在Chrome和IE7

來源

2012-12-05 Dustin

用戶代理樣式，如填充，邊框等 – Musa

取決於用戶爲控件設置的樣式。有些用戶有不同的用戶代理設置，這些設置可以修改select元素上按鈕的大小，文本框的邊界等等。 –

據我所知，這不是因爲用戶代理樣式，因爲我已重置大部分在我的CSS中。這兩個元素具有相同的字體，字體大小，行高，填充，邊距和邊框寬度，並進行渲染。然而，寬度稍微小一些，而選擇上的高度實際上稍高一些。 – Dustin

我認爲這是與所呈現箱尺寸。選擇的可視部分小於定義寬度的框。包括這個在你的CSS中，它會顯示正常。

input, select { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

http://codepen.io/joe/pen/taJnz

參考：Select inputs and text inputs in HTML - Best way to make equal width?

編輯：我想通了，爲什麼發生這種情況。我認爲這是因爲當你指定寬度時，你告訴它製作內部盒子的實際輸入區域有多大。該文本框還帶有作爲標準的邊框，邊框的寬度爲文本區域的寬度，每個邊框爲2像素。添加上面的CSS會改變寬度的計算方式。當我創建文本框1px的邊框時，它只比選擇的大2px。這似乎解釋了它。

來源

2012-12-05 02:12:15 amustafa

感謝您提供其他問題的鏈接。我仍然不確定這是爲什麼發生這種情況，除了表單元素似乎比其他元素的風格更少。您的解決方案有效，但不夠理想，因爲盒子大小：邊框與IE7不兼容。我擔心有可能沒有任何其他解決方案... – Dustin

你也可以作爲另一種不太理想的解決方案，只是使輸入項的寬度減小4像素。也許是因爲當你指定在CSS中的寬度，你是告訴它有多大的內部框和邊框是每個2px，這是文本區域寬度的附加大小。添加上面的CSS會改變寬度的計算方式？當我將文本框的邊框設置爲1px時，它只比選擇的大2px。這似乎解釋了它。我會在上面添加這個解釋。 – amustafa

執行此操作的最可靠的方法是指定輸入框的默認邊框寬度，然後確保每個框的寬度佔邊框的寬度。 – amustafa

爲什麼select元素不像其他表單元素那麼寬？

回答

相關問題