Webkit CSS to Control the Box Around the Color in an Input[Type=Color]

Webkit CSS to control the box around the color in an input[type=color]?

WebKit has special CSS selectors you can use to customize form controls but they aren't official.

An update to WebKit in the future will probably break it.

Please don't use it for production!!

But feel free to play with it for personal projects :)

Method 1

Uses webkit-specific selectors to mostly hide the non-colored part of the input.

input[type="color"] { -webkit-appearance: none; border: none; width: 32px; height: 32px;}input[type="color"]::-webkit-color-swatch-wrapper { padding: 0;}input[type="color"]::-webkit-color-swatch { border: none;}

<input type=color value="#ff0000">

Input type color styling

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>

Remove border around the color in an input[type=color] in Firefox?

It's similar to ::-webkit-color-swatch.

::-moz-color-swatch {
    border-color: red;
}

Rounded input type='color'

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'>

Unable to change color of input type=color field using javascript

Try these methods.

1. $('.myColor1').attr('value', '#FF0000'); 
2. $('.myColor1').prop('value', '#FF0000');

JS:

3. var elem = document.querySelector('.myColor1'); 
   elem.setAttribute('value', '#FF0000');

Code should not work because when label is used to fake the input field, the label's CSS should be updated through Javascript and not the input field's color. Label color change also changes the input field's color but not vice versa.

How to Change HTML5 Color Input Inner Radius

There's no good cross-browser way of doing this; browsers just don't expose the necessary hooks, except Chrome (and maybe Safari and other WebKit-based browsers). Firefox has some support, outlined here.

The following will work in Chrome 55. It was compiled from a number of sources, most notably from Keishi Hattori's answer

#color1 {  -webkit-appearance: none;  padding: 0;  border: none;  border-radius: 10px;  width: 20px;  height: 20px;}#color1::-webkit-color-swatch {  border: none;  border-radius: 10px;  padding: 0;}#color1::-webkit-color-swatch-wrapper {  border: none;  border-radius: 10px;  padding: 0;}

<input type="color" id="color1" />

Remove inside border in type=color

Use the ::-webkit-color-swatch selector.

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-webkit-color-swatch{
  border:none;
}

<input type="color" name="name1" id="name1" value="#ffffff">

Webkit CSS to Control the Box Around the Color in an Input[Type=Color]