ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Font Awesome: Иконки внутри select
4 сообщений из 4, страница 1 из 1
Font Awesome: Иконки внутри select
    #39926560
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Мне бы хотелось отобразить в выпадающем списке значки.
Делаю так:
Код: html
1.
2.
3.
4.
5.
6.
<select class="form-control" id="fndStatus">
	<option selected>Любой</option>
	<option value="0" class="fas fa-spinner">&#xf110; В работе</option>
	<option value="1" class="far fa-thumbs-up">&#xf164; Выполнено</option>
	<option value="2" class="far fa-thumbs-down">&#xf165; Отклонено</option>
</select>


В принципе результат достигнут, но в позициях со значками серифный шрифт, который не очень хорошо смотрится.
Можно ли это сделать красивее, используя select/option?
...
Рейтинг: 0 / 0
14.02.2020, 09:43
| Ответить | Цитировать | Написать  
Font Awesome: Иконки внутри select
    #39926784
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Да нет никаких особых способов стилизовать option
Только раскрасить фон и цвет для всего select
...
Рейтинг: 0 / 0
14.02.2020, 16:26
| Ответить | Цитировать | Написать  
Font Awesome: Иконки внутри select
    #39926785
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Хотя нет
Для option можно отдельно задавать
option {
color:...;
background-color:...;
font-family: ...;
font-size: ....;

}
...
Рейтинг: 0 / 0
14.02.2020, 16:33
| Ответить | Цитировать | Написать  
Font Awesome: Иконки внутри select
    #39926788
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
К сожалению псевдоэлементы (option::before) не работают, поэтому CSS не поможет.
...
Рейтинг: 0 / 0
14.02.2020, 16:39
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Font Awesome: Иконки внутри select
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?desktop=1&fid=22&tid=1443543]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 58ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 233ms
total:  383ms
созд. / загр.: 383ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]