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

This works fine for setting a different default color from black:

   <input
        type="color"
        value="#123456"
        onChange={(e) => handleBGColor(e)}
    ></input>

However when I was using shorthand 3-hex values like "#000" or "#FFF" instead of 6 like above it did not work.

Answer 2

The answer can be twofold.

1. For display purposes, yes, you can set a default color just by setting the value of the input to the color you want. You can see varieties of this in the answers on this page.
2. Technically, no. It is not possible to send an empty value as color through POST. The POSTed value will always default to #000000 or the color which you have set default (as mentioned in 1.).

---

After some thought on this, perhaps a practical solution for this might be to choose #010101 as a reference to null or false or whatever. This leaves room for some jQuery (or javascript) to make it less likely that this value can be set.

<input type="color" name="myColor" required="" />

For instance, on one hand the color inputs that are set to required can be given the value #010101 at event load. And to be sure, prevent users selecting the color #010101.

(function($){

  "use strict";

  // Set all required color input values to #010101.
  $(window).on("load", function() {
    $("[type='color'][required]").val() == "#010101";
  });

  $("[type='color'][required]").on("change", function() {

    // Prevent users selecting the color #010101.
    if($(this).val() == "#010101") {
      $(this).val() == "#000000";
    }
  });

})(jQuery)

At the time of server-side validation, #010101 is considered as empty (or false, etc.).

<?php
$color = htmlspecialchars($_POST['myColor']);
if($color == "#010101") {
  // Do variable empty routine
} else {
  // Do variable has value routine
}
?>

*Now you can be pretty sure to know if the user has set the value, as long as the UA has javascript capabilities.

The drawback is the setting of the color on load. Reload with a pre-set value is not possible this way. Perhaps this can be improved with the use of sessionStorage.*

But the real point is: Why am I doing this? I don't think it should be neccessary, the default value of #000000 is the single deviation from the normal workings of an input type. Except for the range input type, which also has an optional default value, this color input type is very different.

Answer 3

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 4

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 5

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

Answer 7

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 8

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/