CODEWITHSUNDEEP
javascripthtmlcssdom
AlexStack
AlexStack

Reputation: 17381

Showing color picker dialog without showing input option?

I need to get some color input from the user when they click a particular div. The div itself is heavily styled and I don't want to ruin its appearance by dropping an input[type=color] in it.

Is there a way to programmatically open the native color picker? Is there a way to hide the input[type=color] in the div (probably with -webkit-appearance: none) to make it show a color picker when it is clicked?

Upvotes: 2

Views: 3815

Answers (2)

roeb
roeb

Reputation: 487

i found that using focus() on the input should open the color picker ... but only in supported browsers - what browsers and when isn't said

my chrome wont open the color picker (https://jsfiddle.net/63vjom0x/)

HTML

<div id="test">some content<br>
<input type="color" name="farbe" id="farbe"></div>

JS

$('#test').click(function() {    
    alert("div clicked");
    $('#farbe').focus();
});

(https://www.wufoo.com/html5/types/6-color.html)

Upvotes: -1

jbutler483
jbutler483

Reputation: 24549

You could probably use something like hide the input using opacity. It means that you would still maintain its click event, without actually showing the colour button itself.

This works since whilst the input is hidden with opacity:0, the input is 'still there' and so can still be clicked.

A quick demo would be:

div {
  height: 100px;
  position: relative;
  background: lightgray;
  width: 200px;
  text-align: center;
  line-height: 100px;
}
div input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
<div>CLICK ME
  <input type="color" />
</div>

Upvotes: 3

Related Questions