diff options
| author | Mark Otto <otto@github.com> | 2019-08-24 02:59:57 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-08-24 02:59:57 +0300 |
| commit | b02bae769e989838229c13a7c97d5af4c338601d (patch) | |
| tree | 9a78b1f8203b7453f6dc2b41453c220aa091bb9f | |
| parent | 1a9b1206c2e1857ce9dea86a33d3fa58d54a57e1 (diff) | |
Document example of datalists with form controls (#29058)
- Add example to the new form control docs
- Reset the [list] selector in Reboot to hide the random dropdown arrow in Chrome
| -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 4b14ff1018..15cc5972f9 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 8bca403b01..fa27ebea4e 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 >}} |