HTML5 input color's default color

Question

The input type=\"color\" has a default color which is black: #000000.

Even if I give it an empty value...

Answer 1

Edit: Now since, I have understood your question correctly, I have updated my answer.

Although the W3C Spec defines that the value attribute has a string representing the color, it doesn't define the default color. So I think that the implementation of default color is left at the discretion of the browser.

However, the WhatWG Spec anwers your question with this note,

Note: When the input type element is in the color state, there is always a color picked, and there is no way to set the value to the empty string.

Moreover, based on your expectation, the CSS language never defined a NULL attribute for any element, which makes it impossible for the input type='color' to have NULL as the default value.

Workaround:

The workaround is present in the Shadow DOM API.

Using Chrome Developer Tools, I found that we can give a transparent color to the pseudo element ::-webkit-color-swatch background property -

input[type=color]::-webkit-color-swatch 
{ 
    background-color: transparent !important; 
}

For the above CSS, your HTML should like this - . Now you don't need to have any kind of listener to tell if the user has changed the default color or not. You can simply treat the transparent color as the NULL color based on which you can make a decision whether the value was changed or not!

I am sure that you will find similar kind of information from the Shadow DOM for Firefox to set transparent value for background. IE still remains a pain for us.