diff options
| -rw-r--r-- | scss/_reboot.scss | 7 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/form-control.md | 20 |
2 files changed, 27 insertions, 0 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 4b14ff101..15cc5972f 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -407,6 +407,13 @@ select { word-wrap: normal; } +// Remove the dropdown arrow in Chrome from inputs built with datalists. +// +// Source: https://stackoverflow.com/a/54997118 + +[list]::-webkit-calendar-picker-indicator { + display: none; +} // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // controls in Android 4. diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index 8bca403b0..fa27ebea4 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -84,3 +84,23 @@ Keep in mind color inputs are [not supported in IE](https://caniuse.com/#feat=in <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color"> </form> {{< /example >}} + +## Datalists + +Datalists allow you to create a group of `<option>`s that can be accessed (and autocompleted) from within an `<input>`. These are similar to `<select>` elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for `<datalist>` elements, their styling is inconsistent at best. + +Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist). + +{{< example >}} +<form> + <label for="exampleDataList">Datalist example</label> + <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> + <datalist id="datalistOptions"> + <option value="San Francisco"> + <option value="New York"> + <option value="Seattle"> + <option value="Los Angeles"> + <option value="Chicago"> + </datalist> +</form> +{{< /example >}} |