減少HTML中下拉的字體大小

Question

我的HTML頁面中有下拉菜單，它的寬度大於250像素。

我需要更改下拉字體大小，以便減小寬度。

我嘗試使用字體標籤象下面這樣：

<font size='6'> 
    <select> 
    <option></option> 
    . 
    . 
    . 
    </select> 
</font> 

上面的代碼沒有工作。

當我試圖通過將值硬編碼爲width = '50'來減小寬度時，它隱藏了所有下拉列表的全部內容，這些下拉列表變得很難選擇特定的選項。

建議解決方案，使寬度減小，並在下拉列表中顯示所有選項。

注：它應該是兼容IE8的

Answer 1

要更改字體大小，只適用font-size:XXpx; CSS屬性：

<select style="font-size:6px;"> 
 
    <option>option1</option> 
 
    <option>option2</option> 
 
    <option>option3</option> 
 
</select>

或者，如果你想要把它在你的樣式表中：

select{ 
 
    font-size:6px; 
 
}

<select> 
 
    <option>option1</option> 
 
    <option>option2</option> 
 
    <option>option3</option> 
 
</select>

Answer 2

嘗試這種簡單的方法 外部樣式表方法

select{font-size:6px;}

<select> 
 
    <option>option1</option> 
 
    <option>option2</option> 
 
    <option>option3</option> 
 
</select>

內聯的樣式表的方法

<select style="font-size:6px"> 
 
     <option>option1</option> 
 
     <option>option2</option> 
 
     <option>option3</option> 
 
    </select>

Answer 3

使用CSS font-size規則您select - 元素

<select style="font-size: 6px"> 
    <option>ABC</option> 
    <option>ABC</option> 
    <option>ABC</option> 
    <option>ABC</option> 
</select> 

這裏有一個Fiddle

Answer 4

在選擇標籤使用下面給出的CSS樣式。

<select style="font-size:6px"> 
    <option></option> 
    . 
    . 
    . 
    </select> 

Answer 5

您可以使用CSS。

實施例：https://jsfiddle.net/9ddaexpz/

HTML：

<select id="myDropdown"> 
    <option>foo</option> 
    <option>bar</option> 
</select> 

CSS：

#myDropdown 
{ 
    font-size: 6px; 
}