减少HTML中下拉列表的字体大小

Question

我的HTML页面中有一个宽度超过250像素的下拉列表。

我需要更改下拉字体大小，以便减小宽度。

我尝试使用如下字体标记：

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

上述代码不起作用。

当我尝试通过将值硬编码为 width ='50'来减小宽度时，它会隐藏所有下拉列表的全文，这很难选择特定选项。

建议一个解决方案，以便减少宽度，并在下拉列表中显示所有选项。

注意：它应该在IE8中兼容

Answer 1

要更改字体大小，只需应用font-size:XXpx; css属性：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，如果您想将它放在样式表中：

＆＃13;

＆＃13;

select{
  font-size:6px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在font-size - 元素

上使用CSS select规则

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

这里是Fiddle

Answer 3

您可以使用CSS。

示例：https://jsfiddle.net/9ddaexpz/

HTML：

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

CSS：

#myDropdown
{
    font-size: 6px;
}

Answer 4

尝试这个简单的方法 外部样式表方法

＆＃13;

＆＃13;

select{font-size:6px;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

内联样式表方法

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

在select标签中使用下面给出的css样式。

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