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

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4b14ff1018eda182a5720fce19db535c25b5737f..15cc5972f9d519cd9b5b58753793d8379ad03e65 100644 (file)
--- 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 8bca403b01b84b962e5ce8d75a5de18b2ae30fcb..fa27ebea4e591b8045f0f3e24687704d709cf32a 100644 (file)
--- 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 >}}