Как изменить шрифт-семейство выпадающего списка?

У меня есть раскрывающийся список, в котором перечислены семейства шрифтов. Как и Tahoma, Arial, Verdana и т.д. Я хочу изменить семейство шрифтов каждого раскрывающегося элемента в соответствии со значением, которое оно представляет. Так же, как Photoshop.

Я изменил CSS для каждого раскрывающегося элемента, но он работает только с FireFox. Он не работает ни в одном другом браузере.

Я не хочу использовать какой-либо плагин jQuery.

Ответ 1

Что, поскольку дети select children (option s) не являются действительно стильными, а firefox, похоже, единственный браузер, который игнорирует эту часть спецификации.

Обходной путь заключается в замене вашего элемента select на пользовательский виджет, который использует только стилируемые элементы и, возможно, немного javascript для интерактивности. как это делается здесь: ~~http://jsfiddle.net/sidonaldson/jL7uU/~~ или http://jsfiddle.net/theredhead/4PQzp/

Ответ 2

Вы можете установить шрифты для раскрывающегося списка HTML следующим образом:
1. Создайте список опций, которые будут отображаться в раскрывающемся списке, но не применяйте ни один стиль или классы к любому из этих параметров. В PHP я бы сохранил список параметров для переменной, а затем использовал эту переменную, чтобы добавить параметры в мое раскрывающееся меню, которое я покажу ниже.
2. Если вы хотите на самом деле вставить раскрывающийся список на страницу, используйте тег SELECT и поместите стили CSS в этот тег, как показано ниже:

<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>

Это работает на 100% отлично для меня на веб-сайте, над которым я сейчас работаю. Это просто стиль, который я использовал на своей странице, но это может быть то, что вам нужно.

Ответ 3

Что вы можете сделать в CSS, это то, что вы описали: установка font-family на option элементов, и это имеет ограниченную поддержку браузера. Браузеры могут реализовывать элементы select, используя процедуры, которые частично или полностью не защищены от CSS.

Обходной путь заключается в использовании чего-то другого, кроме элемента select, такого как набор переключателей, но, конечно, он будет отображаться иначе, чем выпадающее меню. Затем вы можете использовать, например,

<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...

Ответ 4

   <select>
     <option style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
     <option style="font-family: Arial">Arial</option>
     <option style="font-family: 'Times New Roman'">Times New Roman</option>
  </select>

вы можете o через этот сайт и получите идею

наслаждайтесь:)

спасибо

Ответ 5

Попробуйте следующее:

<html>
  <head>
    <style>
.styled-select {
        overflow: hidden;
        height: 30px;
}
.styled-select select {
        font-size: 14pt;
        font-family:"Times New Roman",Times,serif;
        height: 10px;
}
</style>
    <title></title>
  </head>
  <body>
    <div class="styled-select">
      <select>
        <option selected="selected" >One</option>
        <option >Two</option>
      </select>
    </div>
  </body>
</html>

Ответ 6

Это должно дать вам идею о том, как это сделать:

<select>

    <option value="Arial">First</option>
    <option value="Verdana">Second</option>


    </select>




    $(function() {
    $('select > option').hover(function() {
        $(this).parent().css({fontFamily:$(this).val()})    
})            
})

JSFIDDLE