Главная » 2012 » Октябрь » 29 » Простой выпадающий список на CSS3 (Скрипты для ucoz)
29.10.2012, 11:52

Простой выпадающий список на CSS3



CSS3 дает возможность редактировать стили даже таких элементов форм, как SELECT, RADIO и CHECKBOX. Здесь представлен вариант оформления для выпадающего списка SELECT. Нормальный вид это поле имеет только в Webkit браузерах, в последней версии IE все работает, но есть кое-какие недочеты. Один минус такого метода – это то, что сам список не имеет оформления. Посмотрите «Демо» и Вы сразу поймете, что здесь имеется ввиду. Простой выпадающий список на CSS3 имеет небольшой код CSS, это его преимущество. Раньше, чтобы сделать свой оригинальный вид выпадающему списку, необходимо было прибегать к JavaScript, устанавливать JQuery плагины. Сейчас плагины – это тоже хороший вариант, но с появлением CSS3 оформлять свои веб-страницы стало легче.

Код HTML:
Code
<label>  
  <select>  
  <option selected> Список </option>  
  <option>Пункт</option>  
  <option>Длинный пункт</option>  
  </select>  
</label>

Код HTML:
Code
<style type="text/css">  
  body, html {background:#444; text-align:center; padding:50px 0;}  

/* Выпадающий список на CSS3 */  
  select {  
  padding:3px;  
  margin: 0;  
  -webkit-border-radius:4px;  
  -moz-border-radius:4px;  
  border-radius:4px;  
  -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;  
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;  
  box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;  
  background: #f8f8f8;  
  color:#888;  
  border:none;  
  outline:none;  
  display: inline-block;  
  -webkit-appearance:none;  
  -moz-appearance:none;  
  appearance:none;  
  cursor:pointer;  
}  

  @media screen and (-webkit-min-device-pixel-ratio:0) {  
  select {padding-right:18px}  
}  

  label {position:relative}  
  label:after {  
  content:'<;>';  
  font:11px "Consolas", monospace;  
  color:#aaa;  
  -webkit-transform:rotate(90deg);  
  -moz-transform:rotate(90deg);  
  -ms-transform:rotate(90deg);  
  transform:rotate(90deg);  
  right:8px; top:2px;  
  padding:0 0 2px;  
  border-bottom:1px solid #ddd;  
  position:absolute;  
  pointer-events:none;  
}  
  label:before {  
  content:'';  
  right:6px; top:0px;  
  width:20px; height:20px;  
  background:#f8f8f8;  
  position:absolute;  
  pointer-events:none;  
  display:block;  
}  
  </style>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: yraaa.ru
Категория: Скрипты uCoz | Просмотров: 2122 | Добавил: Voker | Рейтинг: 2.0/1 |
Теги: простой, список, CSS3, Выпадающий, На
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]