select

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

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

Пример:

Таблица 3×3
Lorem ipsum dolor sit amet, consectetur adipisicing elit ... ...
... ... ...
... ... ... 

<table>
    <caption>Таблица 3×3</caption>
    <col/>
    <tbody>
        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

Дети:

OPTGROUP, OPTION.
html 3.2 html 4.0 Frameset html 4.0 Loose html 4.0 Strict html 4.0.1 Frameset html 4.0.1 Loose html 4.0.1 Strict xhtml 1 Frameset xhtml 1 Strict xhtml 1 Transitional html5
optgroup
option

Атрибуты:

accesskey, class, contenteditable, contextmenu, dir, disabled, draggable, form, hidden, id, lang, multiple, name, onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting, size, spellcheck, style, tabindex, title, xml:base, xml:id, xml:lang, xml:space.
html 3.2 html 4.0 Frameset html 4.0 Loose html 4.0 Strict html 4.0.1 Frameset html 4.0.1 Loose html 4.0.1 Strict xhtml 1 Frameset xhtml 1 Strict xhtml 1 Transitional html5
accesskey
class
contenteditable
contextmenu
dir
disabled
draggable
form
hidden
id
lang
multiple
name
onabort
onblur
oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformchange
onforminput
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreadystatechange
onscroll
onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting
size
spellcheck
style
tabindex
title
xml:base
xml:id
xml:lang
xml:space
Браузерные стили
Chrome 
select { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; -webkit-box-sizing: border-box; -webkit-rtl-ordering: logical; background-color: white; border: 1px solid; color: black; cursor: default; display: inline-block; font: -webkit-small-control; letter-spacing: normal; line-height: normal; margin: 0; text-align: -webkit-auto; text-indent: 0; text-shadow: none; text-transform: none; white-space: pre; word-spacing: normal; }

select:disabled { color: GrayText; }

select:focus { outline-offset: -2px; }

select[multiple] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }

select[size="0"] { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; border: 1px solid; white-space: pre; }

select[size="1"] { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; border: 1px solid; white-space: pre; }

select[size] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }

select[size][multiple] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }
firefox 3.6.3 
select { -moz-appearance: menulist; -moz-box-sizing: border-box; -moz-user-select: none; background-color: -moz-Combobox; border-color: ThreeDFace; border-style: inset; border-width: 2px; color: -moz-ComboboxText; cursor: default; font: -moz-list; line-height: normal !important; margin: 0; overflow: -moz-hidden-unscrollable; text-align: start; text-indent: 0; text-shadow: none; white-space: nowrap !important; word-wrap: normal !important; }

select::-moz-scrolled-content { display: block !important; }

select:empty { width: 2.5em; }

select[disabled] { -moz-user-focus: ignore; -moz-user-input: disabled; background-color: ThreeDFace; color: GrayText; cursor: inherit; }

select[multiple] { -moz-appearance: listbox; background-color: -moz-Field; color: -moz-FieldText; padding: 1px 0 1px 0; vertical-align: text-bottom; }

select[size="0"] { -moz-appearance: menulist; background-color: -moz-Combobox; color: -moz-ComboboxText; padding: 0; vertical-align: baseline; }

select[size="1"] { -moz-appearance: menulist; background-color: -moz-Combobox; color: -moz-ComboboxText; padding: 0; vertical-align: baseline; }

select[size] { -moz-appearance: listbox; background-color: -moz-Field; color: -moz-FieldText; padding: 1px 0 1px 0; vertical-align: text-bottom; }

select[size][multiple] { -moz-appearance: listbox; background-color: -moz-Field; color: -moz-FieldText; padding: 1px 0 1px 0; vertical-align: text-bottom; }
ie6 
select { border: 2px inset #fff; font: 10pt Arial; has-layout: true; }
ie7 
select { background-color: #fff; border: 2px inset #fff; font: 10pt Arial; has-layout: true; overflow: hidden; }
ie8 
select { background-color: #fff; border: 2px inset; box-sizing: border-box; display: inline-block; font: 10pt Arial; has-layout: true; overflow: hidden; }
opera 10.53 
select { border: 2px #000; box-sizing: border-box; font: 12px "Lucida Grande"; padding: 1px; }
safari 4.0.5 
select { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; -webkit-box-sizing: border-box; -webkit-rtl-ordering: logical; background-color: white; border: 1px solid; color: black; cursor: default; display: inline-block; font: -webkit-small-control; letter-spacing: normal; line-height: normal; margin: 0; text-align: -webkit-auto; text-indent: 0; text-shadow: none; text-transform: none; white-space: pre; word-spacing: normal; }

select:disabled { color: GrayText; }

select:focus { outline-offset: -2px; }

select[multiple] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }

select[size="0"] { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; border: 1px solid; white-space: pre; }

select[size="1"] { -webkit-appearance: menulist; -webkit-border-radius: 5px; -webkit-box-align: center; border: 1px solid; white-space: pre; }

select[size] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }

select[size][multiple] { -webkit-appearance: listbox; -webkit-border-radius: initial; -webkit-box-align: start; border: 1px inset gray; white-space: initial; }