Стилизация элементов формы (выбор, флажок, радио и т. Д.)?

Question

Стилизация элементов формы с использованием css может быть проблематичной, поскольку каждый браузер отображает тег по-своему (так же, как в случае с отображением сафари).

Хорошо, давайте на некоторое время игнорируем сафари, ввод скинов и кнопки довольно просты, но как полностью выбрать скины, флажки, радио и т. Д.

Смотрите эти страницы:
Флажок скиннинга
Выберите скин
Радио скиннинг

Я слышал, что некоторые JS-фреймворки, такие как EXTJS или MooTools, могут это делать, но я не хочу крупномасштабного фреймворкового решения, просто независимый JS, и мы можем изменять скин, как нам нравится, пожалуйста, не используйте решение JQuery, так как я им не пользуюсь.

Есть идеи сделать это без использования какой-то конкретной структуры?

Answer 1

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

Если вы не хотите использовать фреймворк, то все сводится к DIY.

Тем не менее, у всей концепции есть пара проблем.

1. Попытка заставить элементы управления вести себя так, как ожидает пользователь (при вводе данных нажатием, двойным щелчком, тройным щелчком, правым щелчком, перетаскиванием, клавишами со стрелками, клавишей управления и т. Д., И т. Д.) * сложная .
2. Элементы управления могут выглядеть не так, как ожидает пользователь.

Лично я обычно пытался бы позволить элементам управления формы придерживаться системных значений по умолчанию, а не пытаться отклоняться от них. Дайте пользователям то, что они ожидают.

Answer 2

В настоящее время существует довольно много javascript-решений, которые позволяют настраивать элементы формы в широком диапазоне. Быстрый Google придумал несколько хороших:

• Возможно, самым известным является Bootstrap CSS-фреймворк:
  https://getbootstrap.com/docs/4.0/components/forms

• https://www.psd2html.com/js-custom-forms (плагин jQuery)

• https://purecss.io/forms

• https://github.com/select2/select2

• https://github.com/harvesthq/chosen

• Флажки / Радиоприемники:
  

  • https://codepen.io/vsync/pen/aBOOZB
  • https://codepen.io/vsync/pen/wKkuz
  • https://codepen.io/manabox/pen/raQmpL

Сегодня вы можете найти множество видов стилей элементов формы на Codepen.com

---

Старый ответ (от 16 мая '09 ):

да, это довольно просто.

вы можете использовать niceforms, который является независимым скриптом
для создания красивые формы, тогда вы можете изменить
графические изображения / CSS как ваше желание.

Идея состоит в том, чтобы кодировать что-то, что выглядит одинаково
с тем же Функциональность, но другой дизайн, тогда вам нужно "дать его жизнь "с некоторой магией JavaScript:)

тогда вам нужно иметь повсюду илстенеры, чтобы
проверить что пользователь щелкнул, чем вам нужно отразить
то же значение предварительно скрытому элементу формы
соответствует «подделке» один. значит, манипулировать этим.
затем, когда вы отправляете форму, правильные значения мест через JS.