Input type color styling

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


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>

Here is the code you need:

let colorButton = document.getElementById("primary_color");
let colorDiv = document.getElementById("color_val");

colorButton.oninput = function() {
    colorDiv.innerHTML = colorButton.value;
    colorDiv.style.color = colorButton.value;
}
#primary_color{
    border-radius: 50%;
    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: 50%;
}
<div class="container">
    <input type="color" id="primary_color" class="field-radio">
    <span class="container" id="color_val"></span>
</div>

Basically, it will find the colorButton in the DOM and listen to the input event on this element. When it fires, the text and the color of the text will be updated.

Tags:

Html

Css

Recent Posts