diff options
| author | Mark Otto <markdotto@gmail.com> | 2019-07-17 01:16:15 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-08-24 02:26:28 +0300 |
| commit | 57e17706a97fd14576e0d26ef62d08aa44c0c89b (patch) | |
| tree | bd41a8f54d3ff4f25d8d27d0a4d28eb059abe3cf | |
| parent | 4d101491da094418a768ff2f44be1ca85fd85922 (diff) | |
Add support and docs for color input
| -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 >}} |