mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-11 08:04:59 +02:00
Add support and docs for color input
This commit is contained in:
@@ -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 >}}
|
||||||
|
Reference in New Issue
Block a user