Input type color styling

Question

I have a small question, since I\'m not too good at CSS i want to know if there any way I can recreate such a nice input[type=color] element\'s style? I mean not everything on t

Answer 1

Here is the code you need:

var colorButton = document.getElementById("primary_color");
    var colorDiv = document.getElementById("color_val");
    colorButton.onchange = function() {
        colorDiv.innerHTML = colorButton.value;
        colorDiv.style.color = colorButton.value;
    }

#primary_color{
    border-radius: 100%;
    height: 60px;
    width: 60px;
    border: none;
    outline: none;
    -webkit-appearance: none;
}

#primary_color::-webkit-color-swatch-wrapper {
    padding: 0;	
}
#primary_color::-webkit-color-swatch {
    border: none;
    border-radius: 100%;
}

<div class="container">
    <input type="color" id="primary_color" class="field-radio">
    <span class="container" id="color_val"></span>
</div>

Easy enough to understand, Good luck! :)

Answer 2

Note: for Firefox you would need to use -moz-color-swatch There is no color-swatch-wrapper equivalent on Firefox.

You need to create a new rule, since it's not possible mix vendors prefixed rules (see Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? )

i.e. add

#primary_color::-moz-color-swatch {
    border: none;
    border-radius: 100%;
}

For Firefox to look like what you expect, seems you also need to add padding: 0px; on the #primary_color section

Answer 3

$(document).ready(function(){
  $('input').change(function(){
   var color = $(this).val();
   $('.color-code').html(color);
   $('.color').css({'background':color})
 })
})

.color-picker {
  position: relative;
  width: 100px;
  height: 30px;
  display: block;
}

.color-code {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.color {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="color-picker"><input type="color"/>
<div class="color-code">#000000</div><div class="color" style="background:#000000"></div></label>

You want to did this with jquery

Answer 4

I'm not sure if that's possible with just html and CSS to achieve that. But using Javascript you can cook up something like the following:

• Wrapping the input color tag in a label with border radius 50%.
• Hiding the input and setting a background to the label.
• Using javascript to change the color of the label depending on the color changed in the input color container.

Javascript:

var color_picker = document.getElementById("primary_color");
var color_picker_wrapper = document.getElementById("test_wrapper");
color_picker.onchange = function() {
  color_picker_wrapper.style.background = color_picker.value;
}

#primary_color {
  visibility: hidden;
}

#test_wrapper {
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue, violet);
  height: 32px;
  width: 32px;
  position: fixed;
  border-radius: 50%;
  box-shadow: 1px 4px 10px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="test_wrapper"><input type="color" id="primary_color" class="field-radio" name="primary-color" v-model="scheme.primary" @change="changeColor()"> </label>

Jquery:

$(document).on('change', '#primary_color', function() {
  $("#test_wrapper").css('background', "" + document.getElementById('primary_color').value);
});

#primary_color {
  visibility: hidden;
}

#test_wrapper {
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue, violet);
  height: 32px;
  width: 32px;
  position: fixed;
  border-radius: 50%;
  box-shadow: 1px 4px 10px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="test_wrapper"><input type="color" id="primary_color" class="field-radio" name="primary-color" v-model="scheme.primary" @change="changeColor()"> </label>