From 58d1297fcb9f8686731757cc929f8e9ee4e93efb Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 18 Aug 2015 19:26:18 -0700
Subject: overhaul custom selects with latest from primer, shoutout

---
 docs/components/forms.md | 33 ++++++++-------------------------
 1 file changed, 8 insertions(+), 25 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 352671208..1e467e885 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -655,35 +655,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
 
 ### Select menu
 
-Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
+Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
 
 {% example html %}
-<label class="select">
-  <select>
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>
-</label>
+<select class="c-select">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
 {% endexample %}
 
-The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
-
-- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
-- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
-- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
-- The arrow is hidden in IE10+ with a simple selector.
-- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
-
-**Heads up!** This one comes with some quirks right now:
-
-- `select[multiple]` is currently currently **not supported**.
-- Clickability is limited in IE9.
-- Firefox's dropdown of `option`s looks rather ugly.
-- The custom caret is unable to receive the selected state's `color`.
-
-Any ideas on improving these are most welcome.
+Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
 
 ### File browser
 
-- 
cgit v1.2.3


From a79e7db6bd3ecfb55dc0d84372fbe32ba3b3292b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 18 Aug 2015 19:30:22 -0700
Subject: document some help text examples to the docs

---
 docs/components/forms.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 1e467e885..e7deaa1ab 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -515,10 +515,18 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 
 ## Help text
 
-Block level help text for form controls.
+No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes, you can create much more flexible help text as you need it.
 
 {% example html %}
-<p class="text-help">A block of help text that breaks onto a new line and may extend beyond one line.</p>
+<!-- Inline -->
+<small class="text-muted">Some inline text with a small tag looks like this.</small>
+{% endexample %}
+
+{% example html %}
+<!-- Block -->
+<p class="text-muted">
+  A block of help text that breaks onto a new line and may extend beyond one line.
+</p>
 {% endexample %}
 
 ## Validation
-- 
cgit v1.2.3


From 1ee84d4a1c8dc5de032fadbd6d3fa1f242e1c1ef Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 18 Aug 2015 19:36:01 -0700
Subject: help text tweaks

---
 docs/components/forms.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index e7deaa1ab..5de1bdc46 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -515,15 +515,19 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 
 ## Help text
 
-No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes, you can create much more flexible help text as you need it.
+No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
+
+Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
 
 {% example html %}
-<!-- Inline -->
-<small class="text-muted">Some inline text with a small tag looks like this.</small>
+<small class="text-muted">
+  Some inline text with a small tag looks like this.
+</small>
 {% endexample %}
 
+Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
+
 {% example html %}
-<!-- Block -->
 <p class="text-muted">
   A block of help text that breaks onto a new line and may extend beyond one line.
 </p>
-- 
cgit v1.2.3