Menu
Given
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
How to apply bootstrap css to this? I would except just to add class="form-control" and it would be layouted in the same fasion as a select element? But that did not work. Is this tag not supported?
507
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Use the . input-sm class to set small input field in Bootstrap.
I cannot confirm, that bootstrap 4 does generally not work with the <input>/<datalist> element. Basically you only apply the select field bootstrap classes to the input field, which then gets the look of a select/dropdown with input functionality, e.g.:
<input list="encodings" value="" class="col-sm-6 custom-select custom-select-sm">
<datalist id="encodings">
<option value="ISO-8859-1">ISO-8859-1</option>
<option value="cp1252">ANSI</option>
<option value="utf8">UTF-8</option>
</datalist>
Looks like that on recent Firefox:
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
