Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 input color's default color

Tags:

html

input

colors

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.

like image 367
Ali Bassam Avatar asked Feb 18 '13 18:02

Ali Bassam


People also ask

How do I change the default input color?

You have to use document. querySelector('input[type="color"]'). value = '#ffffff' for it to work.

What is the default color in HTML?

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 .

Can I make the HTML color input only display hex?

You can't make it only display hex, but whatever mode the user chooses the value is stored as hex.

How do you add color in HTML5?

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.


1 Answers

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.

like image 106
subham.saha1004 Avatar answered Sep 28 '22 10:09

subham.saha1004