HTML and CSS Reference
In-Depth Information
Figure 3-19. An editable drop-down rendered using input and datalist in Internet Explorer 10 Platform
Preview 2
For browsers that have not yet implemented
datalist
, the above solution results in the
display of the text input field, but not the list of suggestions. In a few cases, older
browsers may display the option labels.
For a reference on
datalist
browser support, see
Table 3-7
.
Table 3-7. Browser support for the datalist element
IE
Firefox
Chrome
Safari
Opera
iOS
Android
10 Platform Preview 2
4.0+
-
-
10.0+
-
-
A datalist workaround
Web developer Jeremy Keith has proposed the following implementation, which works
with both modern browsers that support the HTML5
datalist
element and those that
do not:
<form>
<p><label for="donation">Donation amount</label>
<datalist id="donations">
<select name="donation">
