表单

选择框

原生 <select> 与输入框采用一致样式，以保持统一。

查看源码

<select name="favorite-cuisine" aria-label="Select your favorite cuisine..." required>
<option selected disabled value="">
  Select your favorite cuisine...
</option>
<option>Italian</option>
<option>Japanese</option>
<option>Indian</option>
<option>Thai</option>
<option>French</option>
</select>

多选

查看源码

<select aria-label="Select your favorite snacks..." multiple size="6">
<option disabled>
  Select your favorite snacks...
</option>
<option>Cheese</option>
<option selected>Fruits</option>
<option selected>Nuts</option>
<option>Chocolate</option>
<option>Crackers</option>
</select>

禁用选择框

查看源码

<select name="meal-type" aria-label="Select a meal type..." disabled>
<option>Select a meal type...</option>
<option>...</option>
</select>

验证状态

通过 aria-invalid 提供验证状态。

Great choice!Please select your favorite pizza topping!

查看源码

<select aria-invalid="false">
...
</select>
<small>Great choice!</small>

<select required aria-invalid="true">
...
</select>
<small>
Please select your favorite pizza topping!
</small>

借助下拉菜单组件，你可以构建与原生选择框样式一致的自定义 select。参见下拉菜单。