2 316 Скрипты / Form

Изменение формы select

Изменение формы select

В уроке будем менять стиль стандартной формы select с помощью jQuery. Способ работает в Firefox, Safari, Chrome, IE7+ и т.д.
Функциональность стандартная - простой <select> и для <option> используется атрибут title, в котором указан путь до иконки.
Для работы нужен jQuery 1.4 или выше.

HTML

Сразу для двух демок:

<form action="#" method="post">
<!-- Демка 1 -->
<select id="demo01" name="customSelectForm">
  <option value="1" title="img/demo01/icon/01.png">Ром</option>
  <option value="2" title="img/demo01/icon/01.png">Виски</option>
  <option value="3" title="img/demo01/icon/01.png">Коньяк</option>
  <option value="4" title="img/demo01/icon/01.png" selected="selected">Пиво</option>
  <option value="5" title="img/demo01/icon/01.png">Текила</option>
</select>
<!-- /Демка 1 -->

<!-- Демка 2 -->
<select id="demo02" name="customSelectForm">
  <option value="1" selected="selected">10</option>
  <option value="2">20</option>
  <option value="3">30</option>
  <option value="4">40</option>
  <option value="5">50</option>
</select>
<!-- /Демка 2 -->
</form>

JS

Плагин вызывается так (сразу для двух демок):

$(document).ready(function(){
  $('#demo01').customSelectForm({icon:true});
  $('#demo02').customSelectForm();
});
Скачать 573Загрузок 6,8 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи