Как добавить значок, чтобы выбрать варианты выбора?

Question

В основном у меня есть текстовое поле с выпадающим списком модификаторов. Я бы хотел, чтобы значок выбранного выбора отображался при выборе. Проблема с текущей настройкой (с использованием UNICODE) заключается в том, что значки не всегда отображаются, например, на google chrome (если только не установлены конкретные шрифты).

Для примера см скрипки: https://jsfiddle.net/q5eLLu2h/

<select class="squareDropdown" id="da" name="da"> 
    <option value="AND">➕&nbsp; AND</option> 
    <option value="EXCEPT">➖&nbsp; EXCEPT</option> 
    <option value="OR"><b>O</b>&nbsp; OR</option></select> 
<input class="textArea" id="d" name="d" placeholder="d" type="text" /> 
<br> 
<br> 
<br> 
<select class="squareDropdown" id="ca" name="ca"> 
<option value="OR"><b>O</b>&nbsp; OR</option> 
<option value="AND">➕&nbsp; AND</option> 
<option value="EXCEPT">➖&nbsp; EXCEPT</option> 
</select> 
<input class="textArea" id="c" name="c" placeholder="c" type="text" /> 

Кто-нибудь есть какие-либо советы о том, что я мог сделать? Можно ли отображать символы юникода (например, заставляя человека загружать их?) Или простой способ получить изображения или изображения в поле выбора или что-либо на самом деле. Установлен JQuery UI, есть ли что-нибудь, что я могу с ним сделать?

Благодарим вас

Answer 1

Опции трудно стиля.

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

Именно поэтому кнопки ввода формы для отправки файлов не соответствуют тем же правилам, что и любые другие кнопки отправки в форме.

Вот еще about limited and inconsistent possibilities и вопрос, который доказывает <option> can't have any children (это, в свою очередь, останавливает работу псевэ-элементов от работы, поскольку элементы psuedo отображаются как узлы DOM).

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

Использование JQuery

Есть много способов имитируя выбор формы вариант полей с различными яваскрипта плагинами, что даст вам больше контроля, тем не менее, они приходят с важной оговоркой. Стандартные элементы выбора приносят с собой все дополнительные удобства и возможности доступа (такие как фокусировка клавиатуры и работа). Разработчики плагинов javascript не обязательно задумываются, поэтому используйте их с осторожностью.

Следует также помнить, что при замене сложных функций с помощью JQuery у вас довольно много накладных расходов при тестировании/разработке - элементы выбора работают только во всех браузерах без фактической функциональности, требующей тестирования. Это более важно, если вы обратите внимание на все точки доступности.

Статья MDN, однако, считает, что это лучший способ и перечисляет некоторые хорошие плагины для решения, которое я бы использовал, поскольку MDN можно доверять, чтобы рассмотреть все важные вещи, о которых я упоминал выше.

Ради ссылки гнили, здесь находятся два из трех они рекомендуют эту ссылку на продукт еще:

UniForm

FormalizeMe

(обратите внимание, я не пробовал эти, я просто доверяю Mozilla!)

Unicode

Вы пытаетесь использовать Юникод в ваших опционных тегов. Это должно работать и без принудительной загрузки пользователя, если вы:

• Используйте шрифт, который должен содержать символы Unicode, которые вы хотите использовать.
• Убедитесь, что у вас есть набор символов в вашей документации устанавливается в UTF-8

Однако, вы только когда-нибудь символы, никогда styleable иконки и вы можете быть застрял с websafe или фирменных шрифтов.

Это jsfiddle here демонстрирует с веб-безопасной font-family: sans-serif, а также символы, взятые из этой ссылки с big list of those that are commonly supported

И наконец

Для малого параметра задается radio buttons are probably better. Пользователь может сразу увидеть доступные варианты, а не открывать их каждый раз (лучше обучаемость, более быстрое познание); плюс, они могут сделать желаемый выбор или изменить желаемый выбор одним щелчком мыши каждый раз. Ребята на UX.SE обсуждают, что использовать дальше, raising other points.

Все ваши проблемы могут просто исчезнуть, если вы думаете о том, является ли <select> лучшим вариантом.