圆形<input type='color'>

Question

$("#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'>

即使我将

<input type='color'>

设为圆角，当我输入一个值（至少在 safari 上）时，它会将圆形更改为正方形。我怎样才能做到这一点？谢谢。

Answer 1

我的想法：

创建一个内联块
```
<span>
```
将
```
input[type=color]
```
设置为不可见。
绑定
```
<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%;
  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'>

Answer 2

在之前类似的情况下，我为此所做的是添加两个带有伪选择器

::-webkit-color-swatch

和

::-webkit-color-swatch-wrapper

的额外样式..不知道确切的原因..当时不知何故得到了这个答案（可能来自所以本身;))..

添加，

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

请参阅下面的片段..

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

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

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

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

更新

我想我得到了解决方案的教程..这里就是它..

Answer 3

我个人很喜欢这个解决方案，因为它不涉及JS。

<style>
.color-input-wrapper {
  height: 1.5em;
  width: 1.5em;
  overflow: hidden;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.color-input-wrapper  input[type=color] {
    position: absolute;
    height: 4em;
    width: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>
<div class="color-input-wrapper">
     <input type="color">
</div>

Answer 4

<style>
   input[type="color"] { scale: 3 }

    .input_container {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        overflow: hidden;
        border: orange 2px solid;
    }
</style>

<div class="input_contianer">
    <input type="color">
</div>

Answer 5

这是我的解决方案

--> CSS 代码

.colorInput {
   width: 90px;
   height: 90px;
   overflow: hidden;
   border-radius: 200rem;
}

input[type="color"] {
   width: 140%;
   border: none;
   height: 140%;
   outline: none;
   transform: translate(-30px, -30px);
}

-->HTML 代码

 <div class="colorInput">
     <input type="color" value="#333333" class="pickColor" />
 </div>

Answer 6

使用下面的代码，一定会成功的。

 input {
            width: 50px;
            height: 50px;
            border-color: black;
            color: black;
            background-color: #fff;
            border: none;
            cursor: pointer;

        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="color" name="color-gradient-1" id="color1" value="#ff0000" />

</body>

</html>

使用下面的代码，一定会成功的

input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
}

圆形<input type='color'>

问题描述投票：0回答：6

6个回答

最新问题

圆形<input type='color'>

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6