войти зарегистрироваться

Web-разработка whois

индекс
184,85

Стилизация элементов формы — подборка решений

Стилизация элементов формыНе так давно zhendalf писал про стилизацию инпута выбора файла и, судя по комментариям, статья понравилась.
Предлагаю подборку решений, с помощью которых можно стилизовать любой элемент формы — чекбокс, радиобаттон, простой инпут или селект.

 


Красивые чекбоксы


Стилизация элементов форм
Работает в связке с jQuery. Тестировано в FF 2+, Opera 9.5+, Safari 3.1+, IE 6+.

 


Заменитель чекбоксов и радиобаттонов


Стилизация элементов формы
Опять же работает с jQuery. Информации о поддержке браузерами нет, но, думаю, работает почти везде.

 


Скрипт «Фэнсиформ»


Стилизация элементов форм
Скрипт под MooTools. По заверениям разработчика работает даже в старых браузерах (интересно, насколько старых?).

 


Чекбоксы, радиобаттоны и селекты


Стилизация элементов формы
В отличие от предыдущих, это решение полностью автономное. По словам разработчика корректно работает в Firefox, Opera, Safari и Internet Explorer 7.

 


Решение «Найс формс»


Стилизация элементов форм
К сожалению, этот скрипт не работает в Internet Explorer 6.

 


Заключение судмедэксперта


При изменении внешнего вида стандартных (читай, привычных) элементов интерфейса, самое главное — не переусердствовать. Помните, что элемент всегда должен оставаться узнаваем.
Если у вас есть еще какие-то похожие примеры в заначке, то делитесь ими в комментариях.
Для желающих — оригинал статьи.
+82
19 ноября 2008, 16:13
302
Markovnin

комментарии (53)

  • Я не преверженец нестандартных контролов. Во-первых, увеличивается объем кода и время обработки страницы. Во-вторых, тратится больше времени на разработку. И, наконец, стандартные контролы понятнее для пользователя.

    Но в целях демонстрации возможностей — это хорошие примеры.
    • они исключительно в ознакомительных целях
      • Именно!!! Есть опыт дизайна для заказчика, которому вот умри, но нужно было сделать «красивые» эллементы… )) Все ничего, вот тока с файл инпутом уперся. Вы его фиг стилизуете!!! Намучался с ним…
        • Мне аналогичный заказчик попался ))

          Пришлось и файлинпуты стилизовать…
          • А ведь скажет — делай все как в дизайне и никуда не денешься!
    • Это заказчику в тупорылым дизайнером обьясни :)

      А по статье:
      А вообще ни один представленый пример не обрабатывает select в ие ниже 7го.
      Я долго искал — нормального не нашел. Написал сам. Как доточу — выложу.

      • Как вариант, можно использовать input с autocomplete (данные из базы или из массива), решений на базе того же jquery масса
    • Ну почему же только для демонстрации возможностей?
      Если у сайта, у примеру, красивый современный дизайн и стандартные контролы ну никак не сомтрятся на нем, что делать тогда? Уродовать дизайн?

      Да и не все дизайнеры учитывают геморройность замены стандартного вида чекбоксов и Ко на красивенькие и, как результат, не дизайнят эти элементы.
      • Вот, заминусовали меня :)
        А вот делаю сейчас проект, в котором заказчик настоял на нестандартных селектах :)
  • интересно насколько select' идентичный в поведении со стандартными, это какбы самый сложный контролл.
    • в одном из этих решений он не так себя ведет, даже сравнивая с виндовыми — в сафари вообще все по другому
    • НЛО прилетело и опубликовало эту надпись здесь.
      • я не про з-ордер, я про поведение)) как он реагирует на события, полностью ли реализован, просто обычно такие вещи делаются на 50%, потом неудобно что нельзя в стрелку ткнуть или потащить за полоску и тп.
        • НЛО прилетело и опубликовало эту надпись здесь.
  • НЛО прилетело и опубликовало эту надпись здесь.
  • Это ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ тоже следует применять только если очень припесет, т.к. работает не везде, а где работает не всегда одинаково отображается.
    • DYPA
    • DYPA
    • 19 ноября 2008, 16:48
    • #
      • –1
    niceform выглядит хорошо, да и выглядит наиболее полным решением, но работает только в IE7
    IE6 && IE8 falled
    • точнее в ие6 и ие8 не работает, в нормальных браузерах работает вроде
    • Niceforms 1.0 прекрасно работают в IE.
      • довольно странно, что вторая версия не работает )
        «исправили опечатки и добавили новые»
        • Не работает из-за отсутствия нормальной поддержки png24 с прозрачностью в ie6.
          Попробуйте закомментить строку и посмотреть результат
          if(ieversion < 7) {return false;} //exit script if IE6
      • спасибо, действительно работает ;)
  • в мемориз :)
  • > К сожалению, этот скрипт не работает в Internet Explorer 6.
    да и в мозилле как-то не очень, при наведении на скролл бар скрипт вовсе убирает выпавший селект

    Спасибо за обзор, недавно искал какое-то решение для селекта, а под руками ничего не было.
  • Не показывайте это дизайнерам!
    • во во во.
      Как же задолбало.
      Они не понимают сколько нужно возиться, что бы заставить работать их страшненький контрол. Что бы инпуты в сафари не подсвечивались и не портили из страшненькие скругленные углы. Селект — это вообще ужас.
      • Ну, чтобы в Safari не подсвечивалось — input:focus { outline: none }
        В остальном — да.
        • Ага. Кстати все никак не доходили руки тебе отписать в блог. Раз уж тут пересеклись — спасибо за Zen. Пользуюсь и радуюсь:)
          • Рад, что пригодилось ) пожалуйста
        • А потом попробуйте побродить по сайту без мышки ^_~
      • Не убивайте тягу к прекрасному! :)
  • НЛО прилетело и опубликовало эту надпись здесь.
    • приведите пожалуйста примеры более простых решений и примеры удачного дизайна чтобы не быть голословными
      • НЛО прилетело и опубликовало эту надпись здесь.
  • В Yahoo UI очень много нестандартных элементов, притом все стили можно еще и самому править. Но библиотека тяжеловата…
  • очередная статья из серии Топ «рюшечки» — интересно, практически кто-то использует эти штуки?
    • на профите пробовали сделать что-то подобное
    • Для хомяков и промо вполне подойдёт. А для серьёзных приложений с динамическими формами не стОит.
  • Более того, практически все эти решения не думают о навигации с клавиатуры. Это возможно и неважно для сайтов, но для веб-приложений крайне плохо.

    Так что стандартные — это наше все.
  • Спасибо. В Закладки :)
    • ngg
    • ngg
    • 19 ноября 2008, 20:47
    • #
      • 0
    давно интересовался чем-то подобным, надоело на каждом компе наблюдать разные элементы форм, даже в темах оформления для ос они разнятся (например на десктопе у меня под win98 тема, а на нотике — под vistaUltimate)
  • Я хочу что бы контролы выглядели так, как выглядят в системе, благо гтк и фф3 это позволяют.

    А такие «нововведения» к хорошему не приводят.

    Хотя на одном сайте порадовало наклонное поле для поиска, но это уже флеш.
  • На самом деле я обожаю Webkit за CSS свойство -webkit-appearance, с его помощью можно любой элемент «застилить» как душе угодно. Но сейчас не об этом.

    Я давно думал, почему разработчики браузеров не дадут функционала, схожего с Webkit? Почему идеальную страничку должны поганить уродские контролы операционки? Особенно, если у юзера стоит Win98 стиль, пусть даже под Vista или XP… Неужели если дизайнер рисует обалденно красивый сайт, нельзя было б на этот сайт нарисовать и контролы?

    Просто средства на JS это даже не полу-меры, это вообще не вариант. Объясню почему.

    — Отрабатывают все скрипты обычно сразу после загрузки страницы, поэтому привет динамическое добавление полей, а также вариантов поля select (это охватывает как динамическое создание, так показ скрытых элементов)
    — Люди с отключенным JS все равно увидят жесть
    — Огромный геморрой с обработкой tabindex и событий с клавиатуры (например стрелочки при использовании поля select и т.д.)

    Уже этих минусов достаточно, чтобы окончательно отказаться от применения JS замен.
  • А самый ужасно бесящий момент — это долбаные select'ы в IE. Там вообще мрак — полное отсутствие поддержки CSS… Если в FF, Opera и Webkit можно хотя бы Padding и Border прописать, то тут только размер шрифта и фон.

    И все это из-за того, что в IE решили, что эти компоненты может рендерить система. Почему интересно тогда Submit и Text можно стилизовать? ;) В Webkit хоть свойство предусмотрели, чтоб можно было стандартные перерисовывать…
  • Единственное, чего не хватает, как и сказали выше — это поддержки background и border для select и option во всех браузерах, отношение к подобного рода рюшечкам — строго отрицательное, хотя кнопки закруглить и file стилизовать достаточно несложно, но это — максимум, в любом другом случае дизайнер посылается по известному адресу
  • Помнится раньше в SVN в качестве эксперемента была ветка с плагином jquery.ui.form, который должен был заниматься стилизацией элементов формы. Но он так и не воплотился в жизнь.
  • мега респект, то что искал не один день, спасибо
  • Отлично тема! добавил в избранное… при верстке всегда нужны такие вещи
  • Может я чего-то не понимаю, а как же впечатляющие примеры с фреймворка Ext JS?
    • Размер библиотеки — 1Мб, если очень постараться то 500-700Кб будет.
      Только что тестировал этот вариант. Размер позволяет встраивать ее только в админку, где юзер может подождать 5-10 секунд, для главной страницы сайта это неприемлемо :(
      Хотя красивая, этого не отнимешь.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.