Document example of datalists with form controls (twbs#29058)

mdo · XhmikosR · commit b02bae769e98 · 2019-08-24T02:59:57.000+03:00
- 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
@@ -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
@@ -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 >}}
