HTML Color selector input

Question

I was working on an HTML form today and needed to create a color selector when I discovered (on accident) that input type 'color' actually creates a color selector in chrome (as well as firefox http://caniuse.com/#feat=input-color).

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

Are there any examples of using the color input type with gracefully fail over to other selectors?

Also it would be nice to show the hex value generated. In chrome it just shows a button box with the background of the selected color.

Is there a way to style an HTML color input to show the selected color's hex value?

Does any HTML attribute fail over to anything else? The answer would be no. — Rob
– Rob, Commented Oct 1, 2015 at 22:28

Your Friend Ken · Accepted Answer · 2015-10-02 20:04:03Z

Here is what I ended up using:

$("input.color").each(function() {
  var that = this;
  $(this).parent().prepend($("<i class='fa fa-paint-brush color-icon'></i>").click(function() {
    that.type = (that.type == "color") ? "text" : "color";
  }));
}).change(function() {
  $(this).attr("data-value", this.value);
  this.type = "text";
});

label {
  font-family: sans-serif;
  width: 300px;
  display: block;
  position: relative;
}
input {
  padding: 5px 15px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}
input[type=color] {
  padding: 0;
  border: 0;
  height: 40px;
}
input[type=color]:after {
  content: attr(data-value);
  position: absolute;
  bottom: 10px;
  text-align: center;
  color: #fffff5;
  display: block;
  width: 100%;
}
.color-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #666;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  Color:
  <br />
  <input class="color" placeholder="#XXXXXX" data-value="#xxxxxx" />
</label>

arcyqwerty · Accepted Answer · 2015-10-01 21:53:47Z

1

Are there any examples of using the color input type with gracefully fail over to other selectors?

You could find ways to gracefully fallback to another color picker if color input is not available. For example, https://github.com/bgrins/spectrum. (Try searching for "input color polyfill" for other options).

Is there a way to style an HTML color input to show the selected color's hex value?

For my Chrome (45.0.2454.93), it does show the hex value in the color selector while selecting. If you want to show it after selecting, the value of the input appears to be in hex.

document.querySelector('input[type=color]').value

If you want to display that to a user, you could populate another element with that value when onchange is fired for the input element.

answered Oct 1, 2015 at 21:53

arcyqwerty

10.8k4 gold badges53 silver badges91 bronze badges

6 Comments

Your Friend Ken Over a year ago

I was trying to avoid displaying the hex value in another element. If the browser did not support the color input type you would potentially have duplicate information. It would be nice if there were a clean CSS solution.

arcyqwerty Over a year ago

You could use a CSS :before or :after with content(#xxxxxx) set in JS if you really want a single element.

Your Friend Ken Over a year ago

I wonder if there is a way to invoke the native browser's color selector via javascript and capture the results?

arcyqwerty Over a year ago

What native color selector are you referring to?

Your Friend Ken Over a year ago

the chrome color selector dialog box

|

Collectives™ on Stack Overflow

HTML Color selector input

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related