Уменьшение размера шрифта выпадающего списка в HTML

Question

У меня есть выпадающее меню в моей HTML-странице, ширина которой превышает 250 пикселей.

Мне нужно изменить размер раскрывающегося списка, чтобы уменьшить ширину.

Я попытался с помощью тега шрифта, как показано ниже:

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

Приведенный выше код не работает.

Когда я попытался уменьшить ширину с помощью hardcoding, значение 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; 
}