Add support and docs for color input

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 817d8890c7623a6a8d4f4548605e29f3b199779b..ce6197840b76f9e4474f72085207142a5b8ae24d 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -110,3 +110,8 @@
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
+
+.form-control-color {
+  max-width: 3rem;
+  padding: ($input-padding-y / 2) ($input-padding-x / 2);
+}

diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md
index c47940c1100cac01433283d186a05b7a17012617..92593e4f5d7edd9b96044b3382355185b1b7fedd 100644 (file)
--- a/site/content/docs/4.3/forms/form-control.md
+++ b/site/content/docs/4.3/forms/form-control.md
@@ -73,3 +73,18 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
   <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
 </form>
 {{< /example >}}
+
+## Color
+
+On macOS:
+
+- Chrome shows the native color picker
+- Safari shows a custom color picker that points to the input
+- Firefox shows the native color picker
+
+{{< example >}}
+<form>
+  <label for="exampleColorInput">Color picker</label>
+  <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c">
+</form>
+{{< /example >}}