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

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.