Пятница, 22 Февраля 2013 13:16

Элемент select HTML

Written by 
Оцени эту запись
(6 Голоса)

Элемент select предназначен для создания выпадающего списка в HTML, из которого пользователь может выбрать один или несколько позиций. Элемент select является элементом управления и применяется при работе с HTML формами.

 

Элемент select HTML

Пример:

 

<select>

<option>HTML</option>

<option>CSS</option>

<option>JavaScript</option>

</select>

 

 

 

Элемент select поддерживается всеми современными браузерами, должен содержать открывающий и закрывающий теги.

 

Элементы списка select'а должны быть заданы в тегах option. Элементы option могут быть сгруппированы при помощи элементов optgroup:

 

 

<p>Выберите город:</p>

 

<select>
<optgroup label="Украина">
<option>Киев</option>
<option>Львов</option>
<option>Одесса</option>
</optgroup>
<optgroup label="Россия">
<option>Москва</option>
<option>Санкт-Петербург</option>
</optgroup>
</select>

Выберите город:

 

 

Элементу select применимы все глобальные атрибуты и атрибуты событий. Кроме этого, у элемента select есть собственные атрибуты, некоторые из которых были добавлены в HTML5.

 

 

Атрибуты элемента select

 

autofocus(новый в HTML5) - указывает, что элемент select должен получить фокус при загрузке страницы. Значение атрибута - autofocus.

 

disabled - делает элемент неактивным. Значение атрибута - disabled.

 

form(HTML5) - указывает идентификатор одной или нескольких форм, которым принадлежит элемент select

 

multiple - задает элементу select мультивыбор. Значение атрибута  - multiple. Если у элемента select указан данный атрибут, пользователь сможет выбрать несколько позиций списка при помои клавиш Ctrl или Shift. 

 

name - задает имя элемента

 

required(новый в HTML5) - делает элемент select обязательным для заполнения, пользователь должен выбрать хотя бы одну позицию из списка предложенных перед отправкой формы. Значение атрибута - required.

 

size - задает количество видимых позиций элемента select. Если атрибут не задан, отображается выпадающий(открывающийся) список, где виден только первый пункт. Если же атрибут size задан, то видно указанное в значении атрибута количество пунктов списка, остальные доступны при прокрутке элемента.

 

 

Примечания

 

1. Элемент select не может быть потомком элементов a и button.

 

2. Если для элемента select есть соответствующий элемент label, то у него должен быть указан атрибут id со значением, соответствующим значению атрибута for элемента label.

 

3. Если у элемента select есть атрибут required и нет атрибута multiple, то у него обязательно должен быть хотя бы один дочерний элемент option.

 

 

Стилизация элемента select

 

 Ширина списка select зависит от ширина самого большого дочернего элемента option. Высота элемента зависит от значения атрибута size.

 

Стандартные стили элемента select

 

 

select {
-webkit-appearance: menulist;
box-sizing: border-box;
-webkit-box-align: center;
border: 1px solid;
border-image: initial;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
 
select[size],
select[multiple],
select[size][multiple] {
    -webkit-appearance: listbox;
    -webkit-box-align: start;
    border: 1px inset gray;
    border-radius: initial;
    white-space: initial;
}
 
select[size="0"],
select[size="1"] {
    -webkit-appearance: menulist;
    -webkit-box-align: center;
    border: 1px solid;
    border-radius: 5px;
    white-space: pre;
}
 
input, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}

 

 

Стилизация элемента select при помощи CSS

 

Элемент select поддается некоторой стилизации при помощи CSS. Речь идет о цвете фона и текста, размера текста. Что же касается изменения стандартного вида стрелочки или плавного открывания элемента, то с этим уже нужно обращаться к JavaScript.

 

Пример оформления select:

 

 

 

 

<style type="text/css">
.itemFullText .about_select_styles {
background: magenta;
color: white;
width: 300px;
height: 30px;
border: 1px solid violet;
}
.itemFullText .about_select_styles optgroup {
background: blue;
}
</style>
<select class="about_select_styles"> 
<optgroup label="Украина">
<option>Киев</option>
<option>Львов</option>
<option>Одесса</option>
</optgroup> 
<optgroup label="Россия">
<option>Москва</option>
<option>Санкт-Петербург</option>
</optgroup> 
</select>

 

Это, похоже, максимум возможной стилизации элемента select. Если нужна более подробная стилизация, нужно использовать JavaScript. При этом нужно скрывать стандартный select, а на его место по его образу о подобия создавать другой элемент(список ul или div), которые поддается стилизации. Подробнее об этом - Стилизация элементов управления select, checkbox, radio

 

 

 

Additional Info

Еще в этой категории: « Элемент li Элемент option »

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов