From b02bae769e989838229c13a7c97d5af4c338601d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 23 Aug 2019 16:59:57 -0700
Subject: 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
---
 scss/_reboot.scss                           |  7 +++++++
 site/content/docs/4.3/forms/form-control.md | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+)

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 >}}
-- 
cgit v1.2.3