如何更改下拉列表的寬度？

這裏是我的代碼：

<select name="wgtmsr" id="wgtmsr" style="width: 50px;"> 
    <option value="kg">Kg</option> 
    <option value="gm">Gm</option> 
    <option value="pound">Pound</option> 
    <option value="MetricTon">Metric ton</option> 
    <option value="litre">Litre</option> 
    <option value="ounce">Ounce</option> 
</select>

此代碼對IE 6而不是在Mozilla Firefox（最新版本）。任何人都可以告訴我如何減少Firefox的下拉列表的width？

來源

2012-12-18 user1844626

它可以在Firefox 17.0.1上運行。 – Chris

您的代碼應該在所有瀏覽器上正常工作.. – techfoobar

[在HTML選擇下拉選項中設置下拉元素的寬度]的可能重複（https://stackoverflow.com/questions/1702186/set-width-of-dropdown-element- in-html-select-dropdown-options） – StardustGogeta

試試這個代碼：

<select name="wgtmsr" id="wgtmsr"> 
<option value="kg">Kg</option> 
<option value="gm">Gm</option> 
<option value="pound">Pound</option> 
<option value="MetricTon">Metric ton</option> 
<option value="litre">Litre</option> 
<option value="ounce">Ounce</option> 
</select>

CSS：

#wgtmsr{ 
width:150px; 
}

如果你想改變，你可以在你的CSS做這個選擇的寬度：

#wgtmsr option{ 
    width:150px; 
}

也許你在你的css規則中有衝突，會覆蓋你選擇的寬度

DEMO

來源

2012-12-18 11:11:34

與OP有什麼不同？ – Chris

內聯'樣式'定義覆蓋所有其他樣式（除非有'！重要'），所以我不這麼認爲。即使在Firefox 17.0.1上，OP的原始代碼也能正常工作。 – Chris

@ Abody97也許他在css中有衝突 –

創建一個css並將值設置爲style="width:50px;" in css code。在下拉列表中調用CSS的類。然後它會工作。

來源

2012-12-18 11:09:58

嘗試!important參數，以確保CSS不與您指定的任何其他樣式衝突。在添加自己的樣式之前，還可以使用reset.css。

select#wgmstr { 
    max-width: 50px; 
    min-width: 50px; 
    width: 50px !important; 
}

或

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">

來源

2012-12-18 11:13:10 Amyth

你真的嘗試了你的建議嗎？如果你這樣做了，你可能會注意到OP的原代碼已經有效 – Chris

這就是爲什麼我建議他使用'！important'參數來確保代碼不與其他樣式衝突 – Amyth

添加'！important'是唯一爲我工作的東西，我總是忘記它 – Tass

如果你想控制列表下拉的寬度，可以如下做到這一點。

CSS

#wgtmsr option { 
    width: 50px; 
}

來源

2012-12-18 11:13:35 techfoobar

這似乎並沒有工作，至少不是在Chrome中。 –

下拉寬度本身不能被設置。它的寬度取決於選項值。另請參見這裏（jsfiddle.net/LgS3C/）

你可以建立自己的控制或使用類似http://ivaynberg.github.com/select2/

選擇盒狀取決於您的瀏覽器的外觀。

來源

2012-12-18 11:16:53 algorhythm

如何更改下拉列表的寬度？

回答

相關問題