<select>

HTML <select> 元素表示一个控件,提供一个选项菜单:

菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。

属性

包括下列全局属性

autocomplete
DOMString 提供用户代理自动完成功能的提示。 有关完整值的完整列表以及有关如何使用自动完成的详细信息,请参阅HTML自动完成属性。
autofocus
这个属性能够让一个对象在页面加载的时候获得焦点. 在一个页面上下文中, 只有一个对象可以有这个属性,并且是布尔值(true 或者 false).
disabled
这个布尔值的属性表明一个用户是否可以操控该表单对象. 如果这个属性没有被明确定义, 则从它的父元素继承, 例如 fieldset; 如果没有父元素设置 disabled 属性, 那么默认该表单对象 enabled.
form
select所关联的form表单 (它的"表单拥有者"). 如果这个属性被明确定义, 那么它的值一定是在同一个document中表单ID. 这样能够让你把select标签放在任何的位置, 不仅限于作为form表单的后代元素.
multiple
这个布尔值的属性标记select是否可以多选. 默认是单选.
name
控件名称
required HTML5
规定select的值不能为空(布尔值).
size
如果控件显示为滚动列表框,则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为0
提示: 根据HTML5规范, 默认值应该为1; 但是,在实践中,这样会影响到一些网站,同时其它浏览器也没有那么处理,所以Mozilla 在Firefox中选择继续使用默认值 0 .

用 CSS 美化

众所周知,<select>元素很难用CSS进行高效的设计。你可以影响任何元素的某些方面 - 例如,操纵框模型,显示的字体等,你可以使用appearance 属性来删除默认的系统外观。

但是,这些属性不会在浏览器之间产生一致的结果,并且很难在列中将不同类型的表单元素相互排列。 <select>元素的内部结构复杂,难以控制。 如果你想获得完全控制,你应该考虑使用一个具有良好设施的库来构建窗体小部件(例如jQuery UI),或者尝试使用非语义元素,JavaScript和WAI-ARIA滚动自己的下拉菜单来提供语义。

有关样式<select>的更多有用信息,请参阅:

示例

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

结果

注意

这个对象的内容是静态并且不可编辑. 但是你可以通过包含radioboxesradioboxes的一个<fieldset>来模拟可编辑特效(纯CSS), 请看例子.

技术摘要

Content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
Permitted content Zero or more <option> or <optgroup> elements.
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents any element that accepts phrasing content
Permitted ARIA roles menu
DOM interface HTMLSelectElement

规范

Specification Status Comments
HTML Living Standard
<select>
Living Standard  
HTML5
<select>
Recommendation  
HTML 4.01 Specification
<select>
Recommendation  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
selectChrome Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
IE Full support YesOpera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android Full support Yes
autofocusChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
multipleChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
requiredChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
sizeChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参考