Дизайнеры всё время изощряются с тенями и красивыми формами.

Вопрос такой — как проще всего сверстать нестандартный <select>?

Если вы в раю и верстаете только под Вебкит, то воспользуйтесь правилом -webkit-appearance: button, чтобы стилизовать кнопку селекта как угодно.

Немного ЦСС:

.ap-select_special {
  -webkit-appearance: button;
  -webkit-border-radius: 20px;
  /* Подмешал вебкитовский градиент,
     чтобы не показывать стрелку в других браузерах */
  background: url(select-arrow.png) no-repeat right center,
              -webkit-linear-gradient(#fff, #fff);
  border: 2px solid #adcbe2;
  padding: 0 29px 0 7px;
  height: 24px;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  color: #3e94c5;
  font: -webkit-small-control;
}
.ap-select_special:focus {
  -webkit-box-shadow: 0 0 5px #879eb0;
}

И «дизайнерский» селект готов, но работает он только в Сафари и Хроме.

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

По сути, селект — это кнопка и поповер со списком вариантов. Зная джаваскрипт, можно написать собственный элемент. Но сначала лучше поискать что-то готовое.

Вот, например, Chosen. Тут уже реализованы навигация по списку стрелками и поиск.

Попробуем:

$(function() {
  $('select', '.ap-chosen').chosen({no_results_text: 'Не нашлось'});
});

Bезде

Неплохо, осталось написать нужные стили, спрятать поле поиска и заодно исправить неопрятные моменты (например, убрать четырёх-пиксельный отступ вокруг списка):

.ap-chosen_special .chzn-single {
  background: url(select-arrow.png) no-repeat right center;
  border: 2px solid #adcbe2;
  padding: 0 29px 0 7px;
  height: 20px;
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  color: #3e94c5;
  border-radius: 20px;
  box-shadow: none;
}
.ap-chosen_special .chzn-single SPAN {
  display: inline;
  margin: 0;
  overflow: visible;
}
.ap-chosen_special .chzn-single DIV {
  display: none;
}
.ap-chosen_special .chzn-container-active .chzn-single {
  box-shadow: 0 0 5px #879eb0;
}
.ap-chosen_special .chzn-drop {
  margin: 5px 0 0 3px;
  background-color: #fff;
  border: 1px solid;
  border-color: #e4e4e5 #c4c4c4 #979797;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 10px 15px;
}
.ap-chosen_special .chzn-search {
  /* Прячу поле поиска */
  position: absolute;
  left: -99999px;
}
.ap-chosen_special .chzn-results {
  margin: 0;
  padding: 4px 0;
}
.ap-chosen_special .chzn-results LI {
  /* Запрещаю скрывать неподходящие значения */
  display: block !important;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.3;
  padding-top: 3px;
  padding-bottom: 3px;
}
.ap-chosen_special .chzn-results LI.highlighted {
  background-image: linear-gradient(#6aabd0, #4073b0);
  background-color: #548ebf;
  border-top: 1px solid #97c5df;
  border-bottom: 1px solid #294b75;
}
.ap-chosen_special .chzn-results LI EM {
  background: transparent;
}
.ap-chosen_special .chzn-results LI.no-results {
  /* Прячу сообщение о неудачном поиске */
  display: none !important;
}

Изменить поведение при вводе с клавиатуры, чтобы приблизиться к стандартному селекту — после ввода каждой буквы есть 1,5 секунды для ввода следующей, затем значение невидимого поля поиска сбрасывается:

$(function() {
  var clearChznSearch = function(chznSearch) {
    clearTimeout(chznSearch.data('timeout'));
    chznSearch.val('').trigger('keyup');
  }

  var chznSpecial = $('.ap-chosen_special');

  $('input', chznSpecial).bind('keypress', function() {
    var chznSearch = $(this);
    // Очищаю заданный ранее таймаут
    clearTimeout(chznSearch.data('timeout'));
    chznSearch.data({
      timeout: setTimeout(function() {
        // Очищаю поиск по списку через 1,5 секунды
        clearChznSearch(chznSearch);
      }, 1500)
    });
  });

  $('li', chznSpecial).bind('mouseover', function() {
    // Очищаю поиск по списку по наведению на значения
    var chznSearch = $('input', $(this).parents('.ap-chosen_special'));
    if (chznSearch.val()) {
      clearChznSearch(chznSearch);
    }
  });
});

Результат, работает в ИЕ 8+ и всех остальных браузерах.

Для второго элемента с вашей картинки (выбор количества звёзд) ни стандартный селект, ни Chosen не подойдут — придётся написать его самостоятельно.

В бюро всегда осторожно используют нестандартные элементы интерфейса. О целесообразности использования подобных «дизайнерских» контролов я предлагаю высказаться уважаемым советчикам-дизайнерам.

Добавлено: 14 Сентября 2013 03:23:42 Добавил: Андрей Ковальчук Нравится 0

Добавить