mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-15 15:29:22 +01:00
Add support and docs for color input
This commit is contained in:
parent
4d101491da
commit
57e17706a9
@ -110,3 +110,8 @@
|
|||||||
line-height: $input-line-height-lg;
|
line-height: $input-line-height-lg;
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-control-color {
|
||||||
|
max-width: 3rem;
|
||||||
|
padding: ($input-padding-y / 2) ($input-padding-x / 2);
|
||||||
|
}
|
||||||
|
@ -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>
|
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
{{< /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 >}}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user