[css-forms-1] Pseudo-element, structure and styles for <input type="color">
#11837
Comments
|
We definitely something at least for the swatch, especially since it now supports alpha (and displays an indicator) in WebKit. |
|
The swatch may need support for out-of-gamut warning, too. |
From Simon's duplicate issue. |
|
a a single I agree that the button and the color well are separate, which may well be what the wrapper element was for. |
|
The button is just the element itself, tho. ::color-swatch would be the colored block inside of it. |
|
Something like this for the swatch styles looks okay. Would need to think more on how to handle alpha. ::color-swatch {
background-color: control-value(<color>);
width: 1.5em;
border: 1px solid currentColor;
}Per the current spec styles + my idea above you end up with: 
|
<input type="color"><input type="color">
|
For alpha, give it the ol' standard checkerboard background? <!DOCTYPE html>
<style>
button::before {
content: "";
display: block;
background: linear-gradient(var(--color) 0 0), linear-gradient(45deg, #808080 26%, transparent 0 74%, #808080 0), linear-gradient(45deg, #808080 26%, transparent 0 74%, #808080 0);
background-size: 100% 100%, 10px 10px, 10px 10px;
background-position: 0 0, 0 0, 5px 5px;
width: 1.5em;
height: 1em;
border: 1px solid currentColor;
}
</style>
<button style="--color: rgba(255 0 0 / .5)"></button> |
|
This seems to replicate the WebKit approach of a single white and black triangle background (looks a bit nicer on smaller area than the checkers imo). <!doctype html>
<style>
button::before {
content: "";
display: block;
background: linear-gradient(var(--color)),
linear-gradient(to bottom right, black 50%, white 50%);
width: 1.5em;
height: 1em;
border: 1px solid currentColor;
}
</style>
<button style="--color: rgba(255 0 0 / 0.5)"></button>So styles like: ::color-swatch {
background: linear-gradient(control-value(<color>)),
linear-gradient(to bottom right, black 50%, white 50%);
width: 1.5em;
border: 1px solid currentColor;
} |
|
The CSS Working Group just discussed
The full IRC log of that discussion<TabAtkins> ntim: pseudo-elements for color input<TabAtkins> ntim: there's a proposal for ::color-swatch <TabAtkins> ntim: is everyone happy with this? <TabAtkins> TabAtkins: this represents the little rectangle of color in the input <lea> q+ <TabAtkins> ntim: yeah. we can't use the element itself because we support alpha on the color, and want to be able to display the checkerboard behind the swatch to make that visible <astearns> ack lea <TabAtkins> lea: in a color input you can link to a data list <TabAtkins> lea: would these swatches have the same pseudo element? <TabAtkins> ntim: this is just the main input element, not the picker <fantasai> The in-page component of the control <TabAtkins> ntim: not all the browser have the same UI for the picker right now too <TabAtkins> astearns: so resolution is to use ::color-swatch as the name for the in-page representation of the chosen color <TabAtkins> astearns: comments or questions? <TabAtkins> astearns: objections? <TabAtkins> RESOLVED: Use the name ::color-swatch |
CSS Forms 1 currently doesn't define a structure or pseudo-elements for
<input type="color">, this issue is to discuss what these should be.There's currently two different structures across engines:
Firefox:
Chrome:
WebKit:
All of these are web exposed and can be styled (at least with a background-color per my testing).
The use case of the
::-webkit-color-swatch-wrapperelement is unclear to me. Given this I suspect we should align on the Firefox model of a single::color-swatchpseudo element.This can potentially be defined to have a
background-color: control-value(<color>)if we extend control-value to work for color inputs?The text was updated successfully, but these errors were encountered: