Как изменить семейство элементов списка выпадающего списка?

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

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

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

источник

2012-05-22 Mohal

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

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

источник

2012-05-22 05:30:11 Kris

Firefox на самом деле не нарушает спецификацию. Скорее, спецификации умалчивают о проблеме, являются ли элементы «option» стильными (хотя естественное ожидание было бы в том, что их можно стилизовать, как и любой другой элемент, но реализации часто используют технологии, которые этого не позволяют). –

Я помню, что элементы управления форматом должны быть платными. Кажется, я не могу найти, где я это читал, и я могу просто ошибиться в том, где я его прочитал. Насколько я могу судить, большинство браузеров действительно используют собственные средства управления платформой. – Kris

http://jsfiddle.net/sidonaldson/jL7uU/ ссылка не работает –

-2

<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>

вы можете о через этот сайт и будет получить представление

наслаждаться :)

благодаря

источник

2012-05-22 05:22:29 Dolly

Он не работает в сафари –

Его не решение – Ylama

downvote, а не решение – walv

Что вы можете сделать в 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> 
...

источник

2012-05-22 05:26:18

-4

Это должно дать вам представление о том, хо для достижения этой цели:

<select> 

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


    </select> 




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

JSFIDDLE

источник

2012-05-22 05:27:39 defau1t

он сказал, что не хочет использовать jquery. – khurram

Стоит подумать, был ли он кросс-браузер, но не работал в Chrome, когда я попробовал его сейчас. –

-3

Попробуйте это:

<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>

источник

2014-05-23 14:12:14 DevAshish

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

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

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

источник

2016-09-08 17:01:47

Как изменить семейство элементов списка выпадающего списка?

ответ

Смежные вопросы