Блог ⁄ Вёрстка ⁄ Красивые формы для сайта. Выпадающий список

Заморская студия разработчиков смогла сделать формы для сайтов красивыми, в том числе и <select> (чёртов выпадающий список меняется полностью, тем не менее косяков почти нет). Сразу даю ссылку на страницу с последней версией плагина niceforms для скачивания красивых элементов управления для сайта.

Из косяков, встреченных во второй версии niceforms:

1. Периодически не закрываются пресловутые выпадающие списки.
2. Плохо сочетаются с собственными стилями веб-страницы при внедрении. Возможны конфликты CSS-файлов. Что тут скажешь, ! important Вам в помощь…
3. Чекбоксы и радиокнопки периодически, опять же это сильно зависит от стилей, разъезжаются вверх и вниз в различных браузерах.
4. При щелчке в текстовом поле ввода адреса файла иногда открывается окно для выбора файла через проводник, а иногда можно вводить текст. Причём вводится он не там, где должен бы… Это верный признак того, что опять надо определять конфликтующие CSS.
5. Niceforms не работают под IE6.

Это была ложка дёгтя. Теперь бочка мёда.

1. При тонкой настройке CSS Вы получите отличнейшие формы на своём сайте. Элементы управления все будут гладкие, да кучерявые.
2. В архиве есть psd для нарезки своих картинок для создания элементов управления форм: чекбоксов («галочек», «птичек», в оригинале «checkbox»), радиокнопок («radiobutton»), текстовых полей, зон ввода текста («textarea»), полей ввода файлов («file»), кнопок и сабмиттов и, конечно же, выпадающих списков. А также списков с возможностью выбора нескольких элементов (<select size="n">).
3. Готовый каркас для размещения элементов форм при семантической вёрстке на основе определений. Конечно для семантической вёрстки определения (<dd> и <dt>) немного не то, что хотелось бы, но всяко лучше таблиц.

Теперь некоторые аспекты, необходимые при настройке. Первое, что не получится при вставке скрипта — это не отображающиеся картинки, т.е. элементы управления формы не изменятся. Потому что путь к картинкам задаётся через жопу JavaScript-файл.

var imagesPath = "img/"; //вот тут пишем путь к папке с картинками
var selectRightWidthSimple = 19;
var selectRightWidthScroll = 2;
var selectMaxHeight = 200;
var textareaTopPadding = 10;
var textareaSidePadding = 10;


Смысл последних 5 строчек, думаю, понятен без объяснения. Дальше на очереди стили. При смене картинок формы, важно оставлять неизменным название файла. А вот если изменились размеры изображений элементов управления, то придётся ручками задавать их размеры в CSS-файле.

Например, общие настройки (высота, позиционирование и граница) для выпадающего списка задаются в классе .NFSelect. Сразу за .NFSelect идёт описание классов, которые формируют его левую и правую части, кнопку и сам выпадающий список: .NFSelectLeft, .NFSelectRight, .NFSelectTarget, .NFSelectOptions, .NFSelectOptions li и т.д. Главное не забывать менять размеры картинок в CSS, тогда кнопки, текстовые поля, выпадающие списки и прочая утварь формы ввода не будут расползаться.

Приятной работы!