四舍五入< input type ='color'> [英] Rounded <input type='color'>

问题描述

< pre class = snippet-code-js lang-js prettyprint-override> $（＃colour）。change（function（event）{console.log（$（this）.val（） ）;}）;

  input [type = color] {宽度：100px；高度：100px；边界半径：50％；溢出：隐藏；}  

 < script src = https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< input type ='color'value ='＃fefefe'class ='bar 'id ='colour'>  

$ p
$ b

<输入类型='颜色'> 进行四舍五入，当我输入一个值（至少在Safari中）时，它会将圆形改为正方形。我怎样才能做到这一点？谢谢。

解决方案

我的想法：

1. 创建一个内联块< span>


2. set input [type = color] 不可见。


3. 绑定< span> 的单击事件以触发< ; input> .click（）。

因为< input> 对形状自定义不友好。

  $（  #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％;宽度：100px；高度：100px；背景颜色：红色； 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'>  

$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

Even though I made the <input type='color'> rounded, when I input a value (at least on safari) it changes the circle to a square instead. How can I do this? thanks.

解决方案

My idea:

1. create one inline-block <span>
2. set input[type=color] to not visible.
3. 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'>

这篇关于四舍五入&lt; input type ='color'&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！