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...

<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.

Answer 1

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.

Answer 2

Use value:

<input type="color" value="#ff00ff" />

If you want to know if input remain unchanged, you can do something like this (with jQuery):

$(function(){
    $('input').change(function(){
       $(this).addClass('changed');
    })
})

http://jsfiddle.net/j3hZB/

Answer 3

Don't know if this issue is only available on chrome, but I just found the quick fix for chrome. We need to set the input value to #FFFFFF first and after that set it to default value, the default color will appear instead of black

var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;

Hope it help someone :)

Answer 4

I have implemented this kind of solution for myself. It displays nice "transparent" button. When clicked it triggers the normal hidden input-color. When color is picked up, the transparent button will hide and the input-color will show up.

Cheers.

function clickInputColor( button )
{
	$( button ).next().click();
}

function inputColorClicked( input )
{
	$( input ).show();
	$( input ).prev().hide();
}

.inputEmptyColorButton {
	background:url("http://vickcreator.com/panel/images/transparent.png") center repeat;
	width: 50px;
	height: 1.5em;
	vertical-align: bottom;
	border: 1px solid #666;
	border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="clickInputColor( this );" class="inputEmptyColorButton"></button>
					<input onchange="inputColorClicked( this );" style="display: none;" type="color" value="" />

Answer 5

Here is my solution, switching input type from text to color:

$(document).on('click', '.dc-color-input-switcher', function() {
  var dcInputColor = $(this).parent().parent().prev();
  if (dcInputColor.attr('type') == 'text') {
    dcInputColor.attr('type', 'color');
  } else {
    dcInputColor.attr('type', 'text');
  }
});

$(document).on('click', '.dc-color-input-clearer', function() {
  var dcInputColor2 = $(this).parent().parent().next();
  if (dcInputColor2.attr('type') == 'color') {
    dcInputColor2.attr('type', 'text');
  }
  dcInputColor2.val('');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group">
      <span title="Empty" class="btn btn-danger dc-color-input-clearer" data-original-title="Empty Field"><i class="fa fa-times"></i></span>
    </div>
  </div>
  <input name="product_tabs[1][0][bg_color]" value="" placeholder="Background Color" class="form-control pre-input-color" type="text">
  <div class="input-group-btn">
    <div class="btn-group">
      <span title="Toggle color picker" class="btn btn-primary dc-color-input-switcher" data-original-title="Switch color picker"><i class="fa fa-paint-brush"></i></span>
    </div>
  </div>
</div>

Answer 6

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 - <input type="color">. 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.