Стилизация select

Styling with CSS

The element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the property to remove the default system .


However, these properties don’t produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The element’s internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

For more useful information on styling , see:

  • Styling HTML forms
  • Advanced styling for HTML forms

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Examples

Basic select

The following example creates a very simple dropdown menu, the second option of which is selected by default.

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Advanced select with multiple features

The follow example is more complex, showing off more features you can use on a element:

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

You’ll see that:

  • Multiple options are selectable because we’ve included the attribute.
  • The attribute causes only 4 lines to display at a time; you can scroll to view all the options.
  • We’ve included elements to divide the options up into different groups. This is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented.
  • The «Hamster» option includes a attribute and therefore can’t be selected at all.

All together:

This solution is easy and has good browser support — it should generally suffice.

If browser support for Internet Explorer 9 (and later) and Firefox 34 (and later) is necessary then keep reading…

Solution #2 Truncate the select element to hide the default arrow (demo)


Wrap the element in a div with a fixed width and .

Then give the element a width of about 20 pixels greater than the div.

The result is that the default drop-down arrow of the element will be hidden (due to the on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid… because the option elements take the width of the select element).

If the custom arrow is necessary on Firefox — prior to Version 35 — but you don’t need to support old versions of Internet Explorer — then keep reading…

Solution #3 — Use the property (demo)


The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out elements).

Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn’t support , which means you can’t click the custom arrow. Also, another (obvious) disadvantage with this method is that you can’t target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn’t support anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

Совместимость с браузерами

Таблица совместимости на этой странице сгенерирована из структурированных данных. Если Вы хотите внести свой вклад, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам пул запросов.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка Да Замечания Edge Полная поддержка 12 Firefox Полная поддержка 1 Замечания IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да Замечания WebView Android Полная поддержка Да Замечания Chrome Android Полная поддержка Да Замечания Firefox Android Полная поддержка 4 Замечания Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Замечания Samsung Internet Android Полная поддержка Да Замечания
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 4 IE Полная поддержка 10 Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да

Attributes

This element includes the global attributes.

A providing a hint for a user agent’s autocomplete feature. See The HTML autocomplete attribute for a complete list of values and details on how to use autocomplete.
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the attribute.
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example ; if there is no containing element with the attribute set, then the control is enabled.
The element to associate the with (its form owner). The value of this attribute must be the of a in the same document. (If this attribute is not set, the is associated with its ancestor element, if any.)
This attribute lets you associate elements to s anywhere in the document, not just inside a . It can also override an ancestor element.
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When is specified, most browsers will show a scrolling list box instead of a single line dropdown.
This attribute is used to specify the name of the control.
A Boolean attribute indicating that an option with a non-empty string value must be selected.

If the control is presented as a scrolling list box (e.g. when is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is .

Note: According to the HTML5 specification, the default value for size should be ; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla has opted to continue to return for the time being with Firefox.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Notes Edge Full support 12 Firefox Full support 1 Notes IE Full support Yes Opera Full support Yes Safari Full support Yes Notes WebView Android Full support Yes Notes Chrome Android Full support Yes Notes Firefox Android Full support 4 Notes Opera Android Full support Yes Safari iOS Full support Yes Notes Samsung Internet Android Full support Yes Notes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 4 IE Full support 10 Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

HTML Справочник

HTML по алфавитуHTML по категорииHTML атрибутыHTML глобальныеHTML событияHTML цветаHTML холстHTML аудио/видеоHTML декларацииHTML набор кодировокHTML URL кодHTML коды языкаHTML коды странHTTP сообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Usage notes

Selecting multiple options


On a desktop computer, there are a number of ways to select multiple options in a element with a attribute:

Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

Warning: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.

Also note: On macOS, the Ctrl + Up and Ctrl + Down shortcuts conflict with the OS default shortcuts for Mission Control and Application windows, so you’ll have to turn these off before it will work.

Keyboard users can select multiple contiguous items by:

  • Focusing on the element (e.g. using Tab).
  • Selecting an item at the top or bottom of the range they want to select using the Up and Down cursor keys to go up and down the options.
  • Holding down the Shift key and then using the Up and Down cursor keys to increase or decrease the range of items selected.

Keyboard users can select multiple non-contiguous items by:

  • Focusing on the element (e.g. using Tab).
  • Holding down the Ctrl key then using the Up and Down cursor keys to change the «focused» select option, i.e. the one that will be selected if you choose to do so. The «focused» select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.
  • Pressing Space to select/deselect «focused» select options.

Атрибуты

Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.

— отключен(о)
Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент .
— метка, ярлык
Этот атрибут — текст ярлыка, отображающий значение(смысл, описание) опции. Если  не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента .
— выбран(о)
(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент  принадлежит элементу , чей атрибут  не установлен, только одна-единственная  элемента может иметь атрибут  .
— значение, величина
Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента .

Атрибуты

Элемент включает глобальные атрибуты.

HTML5
Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут , элемент является логическим (булевым).
Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру ; если у родительского элемента не указан атрибут , то элемент управления доступен для взаимодействия.
HTML5
Этот атрибут указывает к какой конкретно форме относится элемент <select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы <select> где угодно в документе, а не только как потомки форм.
Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.
Этот атрибут используется для указания имени элемента управления.
HTML5
Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.
Если элемент управления представлен как прокручаваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в  виде прокручеваемого списка. Значение по умолчанию 0.

Примечания Firefox: Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.


С этим читают