Issue
$("#colour").change(function(event) {
console.log($(this).val());
});input[type=color] {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>Even though I made the <input type='color'> rounded, when I input a value (at least on safari) it changes the circle to a square instead. How can I do this? thanks.
Solution
My idea:
- create one inline-block
<span> - set
input[type=color]to not visible. - bind click event of
<span>to trigger<input>.click().
Because <input> is not friendly for shape customization.
$("#colour").change(function(event) {
console.log($(this).val());
$("#color_front").css('background-color',$(this).val());
});
$("#color_front").click(function(event) {
$("#colour").click();
});input[type=color] {
display: none;
}
span {
border-radius: 50%;
width: 100px;
height: 100px;
background-color:red;
display:inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>Answered By – Sphinx
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0