The input type="color"
has a default color which is black: #000000
.
Even if I give it an empty value...
<input type="color" value="" />
...the default color is always black.
I want the user to have the option of picking a color, but if he doesn't it means no color was picked, not even white #FFFFFF
.
Is there a way to force an input type="color"
not to have black color as default?
I can use some kind of a "listener" to check if the user changed the color for the first time, if not, ignore the value, but I would like to avoid Javascript.
You have to use document. querySelector('input[type="color"]'). value = '#ffffff' for it to work.
If you don't specify a value, the default is #000000 , which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: #rrggbb .
You can't make it only display hex, but whatever mode the user chooses the value is stored as hex.
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
While using hexcode for value
attribute in <input type="color">
, one thing I noticed is that it has to be six digits, if for white you use #fff
, it does not work. It has to be #ffffff
.
The same thing happens when setting it through javascript. document.querySelector('input[type="color"]').value = '#fff'
does not work. The color remains black. You have to use document.querySelector('input[type="color"]').value = '#ffffff'
for it to work.
Something to be careful about.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With