Color input style

Question

I have a little question, since I'm not very good at CSS, I want to know if there is a way to recreate such a nice input style [type = color]? I do not mean everything in the screenshot, but only that nice circle that is entered [type = color].

Here I have the code that was written with it, but it does not style the input [type = color], as in the screenshot ... I also saw that the author uses Vue.js in his project ... Thank you very much for the help !

<input type="color" id="primary_color" class="field-radio" name="primary-color" v-model="scheme.primary" @change="changeColor()"> 

 input[type="color"] { width: 3rem; height: 3rem; padding: .5rem; background-color: transparent; border: 0; border-radius: 100%; } input[type="color" i] { -webkit-appearance: square-button; width: 44px; height: 23px; background-color: buttonface; cursor: default; border-width: 1px; border-style: solid; border-color: rgb(169, 169, 169); border-image: initial; padding: 1px 2px; } input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; } input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } 

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

I'm not sure if this is possible with just html and CSS for this. But using Javascript, you can cook something like the following:

• Wrap around an input color tag in a label with a border radius of 50%.
• Hide input and set the background for the label.
• Using javascript to change the color of the shortcut 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> 

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> 

Do you want to do this with jquery

Answer 4

Note. For Firefox you need to use -moz-color-swatch. In Firefox there is no equivalent to the color-swatch-wrapper shell.

You need to create a new rule, since it is not possible to use prefix rules for mixed providers (see. Why can't pseudo-elements / classes related to a specific provider be combined into a single set rule? )

i.e. add

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

To make Firefox look what you think, you also need to add padding: 0px; to the section #primary_color