diff options
-rw-r--r-- | scss/forms/_form-control.scss | 5 | ||||
-rw-r--r-- | site/content/docs/4.3/forms/form-control.md | 15 |
2 files changed, 20 insertions, 0 deletions
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 817d8890c7..ce6197840b 100644 --- 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 c47940c110..92593e4f5d 100644 --- 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 >}} |