У меня есть раскрывающийся список, в котором перечислены семейства шрифтов. Как и Tahoma, Arial, Verdana и т.д. Я хочу изменить семейство шрифтов каждого раскрывающегося элемента в соответствии со значением, которое оно представляет. Так же, как Photoshop.
Я изменил CSS для каждого раскрывающегося элемента, но он работает только с FireFox. Он не работает ни в одном другом браузере.
Я не хочу использовать какой-либо плагин jQuery.
Что, поскольку дети select children (option s) не являются действительно стильными, а firefox, похоже, единственный браузер, который игнорирует эту часть спецификации.
Обходной путь заключается в замене вашего элемента select на пользовательский виджет, который использует только стилируемые элементы и, возможно, немного javascript для интерактивности. как это делается здесь: http://jsfiddle.net/sidonaldson/jL7uU/ или http://jsfiddle.net/theredhead/4PQzp/
Вы можете установить шрифты для раскрывающегося списка 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% отлично для меня на веб-сайте, над которым я сейчас работаю. Это просто стиль, который я использовал на своей странице, но это может быть то, что вам нужно.
Что вы можете сделать в 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>
...
<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 через этот сайт и получите идею
наслаждайтесь:)
спасибо
Попробуйте следующее:
<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>
Это должно дать вам идею о том, как это сделать:
<select>
<option value="Arial">First</option>
<option value="Verdana">Second</option>
</select>
$(function() {
$('select > option').hover(function() {
$(this).parent().css({fontFamily:$(this).val()})
})
})