输入类型颜色样式

Question

我有一个小问题，因为我不太擅长CSS，我想知道是否有任何方法可以重新创建这样一个很好的输入[type = color]元素的风格？我的意思不是屏幕截图上的所有内容，而只是输入[type = color]的那个漂亮的圆圈。

这里我有一些用它编写的代码，但它没有像截图一样设置输入[type = color] ...我也看到作者在他的项目中使用了Vue.js。 ..非常感谢您的帮助！

clearOutputDir

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

Answer 1

我不确定是否可以使用html和CSS实现这一目标。但是使用Javascript你可以做类似以下的事情：

• 将输入颜色标记包装在边框半径为50％的标签中。
• 隐藏输入并为标签设置背景。
• 使用javascript根据输入颜色容器中更改的颜色更改标签的颜色。

<强>使用Javascript：

＆＃13;

＆＃13;

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;
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强> Jquery的：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;  你想用jquery

做到这一点

Answer 3

以下是您需要的代码：

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

很容易理解， 祝好运！ ：）

Answer 4

注意：对于Firefox，您需要使用-moz-color-swatch Firefox上没有等效的颜色样本包装器。

您需要创建一个新规则，因为它不可能混合供应商前缀规则（请参阅Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?）

即。添加

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

为了让Firefox看起来与您的期望相符，您似乎还需要在padding: 0px;部分添加#primary_color