Темизация выпадающих списков, чекбоксов и других элементов форм

Сообщение об ошибке

  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Notice: Trying to access array offset on value of type int в функции element_children() (строка 6595 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters в функции drupal_get_feeds() (строка 394 в файле /home/u1000/domains/bighameleon.com/includes/common.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls в функции menu_set_active_trail() (строка 2405 в файле /home/u1000/domains/bighameleon.com/includes/menu.inc).
Аватар пользователя Натали
Раздел: 

Выпадающих списков и чекбоксов - http://uniformjs.com/

Чекбоксов - http://www.xiper.net/collect/html-and-css-tricks/verstka-form/nice-checkbox.html

Комментарии

Аватар пользователя Натали
Аватар пользователя Натали
Аватар пользователя Натали
Аватар пользователя Ирина

HTML:

<label for="edit-sort-bef-combine">Сортировать по </label>

<select id="edit-sort-bef-combine" class="form-select" name="sort_bef_combine">

CSS:

.form-item-sort-bef-combine label {
 position: absolute;
 overflow: hidden;
 width: 255px;
 background: url("../images/arrow.jpg") no-repeat 100% 50%;
 border: 2px solid #dedede;
 padding-left: 15px;
}

#edit-sort-bef-combine{
 opacity: 0;
  /* z-index: 5; */
 width: 275px;
}
 

Подсмотрено здесь - http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/example/

В результате: лейбл списка превращается в первый предлагаемый вариант по умолчанию. Заменятся стрелка выпадающего списка на свой вариант.

 

Аватар пользователя Ирина

Дополнено для работы с разными браузерами:

#edit-sort-bef-combine{
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -khtml-appearance: none;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity= 0);     /* для ИЕ  */
  height: 100%;    
  z-index: 5;  
  zoom: 1;
  position: relative;  /*  Без этого момента не выводилась наверх лейбла, так чтобы активизировался выпадающий список*/
  width: 275px;  /* обязательно*/
}

Аватар пользователя Ирина

Свойство   height: 100%;   у  #edit-sort-bef-combine убрала - за счет него "рвет" макет  страницы в ие7.

Аватар пользователя Натали

Стилизация радиобаттон при помощи цсс - http://stylesheet.ru/recipes/forms/radio-styled.html

Аватар пользователя Натали

Стилизация поля аплоуд файл - http://www.script-tutorials.com/pure-html5-file-upload/

Аватар пользователя Натали

css генераторы чекбоксов - http://csscheckbox.com/