圆形<input type="color">
[英]Rounded <input type='color'>
问题描述
$("#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.
即使我将<input type='color'>进行了四舍五入，但当我输入一个值（至少在 safari 上）时，它会将圆形改为正方形。 How can I do this?我怎样才能做到这一点？ thanks.谢谢。
4 个解决方案
解决方案1
4 已采纳 2018-02-16 18:10:02
My idea: 我的想法：
- create one inline-block
<span>创建一个内联块<span> - set
input[type=color]to not visible.将input[type=color]为不可见。 - bind click event of
<span>to trigger<input>.click().绑定<span>click事件以触发<input>.click()。
Because <input> is not friendly for shape customization. 因为<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'>
解决方案2
0 2018-02-16 18:10:26
In a similar situation earlier, what I did for this was to add two extra styles with pseudo-selectors ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper .. Don't know the exact reason..Somehow got this answer at that time (probably from SO itself ;) ).. 在之前类似的情况下，我为此做的是添加两个额外的样式与伪选择器::-webkit-color-swatch和::-webkit-color-swatch-wrapper ..不知道确切的原因。当时有人得到这个答案（可能来自SO本身;））..
Add, 加，
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;
}
See the snippet below.. 请参阅下面的代码段..
$("#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'>
UPDATE UPDATE
I think I got the tutorial from which I got the solution.. Here is it.. 我想我得到了解决方案的教程.. 这就是它..
解决方案3
0 2022-09-19 19:22:15
I personally like this solution because it does not involve JS.我个人喜欢这个解决方案，因为它不涉及 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>
解决方案4
-1 2021-09-20 10:57:26
Use the following code, it will definitely work.使用以下代码，它肯定会起作用。
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>
Use the following code, it will definitely work使用下面的代码，它肯定会工作
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 10px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.