是否有特定于 Webkit 的 CSS 样式可以让我控制颜色周围的框的颜色/大小/样式input[type=color]？
我已经设置了输入的颜色和背景颜色，因此它与我用于旧版 Chrome 和 Firefox 的交叉兼容性 polyfill 看起来不错。
现在 Chrome 实际上有一个颜色选择器1px，当输入的颜色和背景颜色都设置为相同的颜色时，颜色周围有一个框，在输入的中间会留下一个灰色的框。
是否有一些 CSS 可以摆脱它，或者通过将该框的宽度设置为 0，将样式更改为none，或者，最坏的情况，将颜色设置为与颜色和背景颜色相同？
在这张图片中，我说的是白色区域周围和绿色之外的灰色框：
我找到了一种解决方法，即设置足够高的填充以使框（灰色边框和绿色内容）被挤压为 0 大小。但这真的很hacky，并且在 Firefox 中看起来不太好。
WebKit 有特殊的 CSS 选择器，您可以使用它来自定义表单控件，但它们不是官方的。
未来对 WebKit 的更新可能会破坏它。
请不要用于生产！！
但是请随意在个人项目中使用它:)
使用特定于 webkit 的选择器来主要隐藏输入的非彩色部分。
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}<input type=color value="#ff0000">隐藏颜色输入 ( opacity:0) 并使用 JavaScript 将包装器的背景设置为输入值。
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;input[type="color"] {
opacity: 0;
display: block;
width: 32px;
height: 32px;
border: none;
}
#color-picker-wrapper {
float: left;
}<div id="color-picker-wrapper">
<input type="color" value="#ff0000" id="color-picker">
</div>一个好的解决方法是：
现在，您有一个易于设置样式的标签，单击该标签会打开您的颜色选择器。正如评论中所讨论的，单击标签会激活颜色选择器，而无需任何 javascript；这是默认行为。
$(document).on('change', 'input[type=color]', function() {
this.parentNode.style.backgroundColor = this.value;
});input {
visibility: hidden;
}
label {
background-color: black;
height: 32px;
width: 32px;
position: fixed;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>JSFiddle：https ://jsfiddle.net/9zhap7rb/3/
我想我正在使用一个简单的解决方案，但不是那么优雅。您可以使用 div 包装输入并使输入大于容器，之后您可以根据需要调整容器的形状。您还可以使用带有 for 属性的标签来创建带有一些文本的可点击按钮。
我做了一个例子：
.input-color-container {
position: relative;
overflow: hidden;
width: 40px;
height: 40px;
border: solid 2px #ddd;
border-radius: 40px;
}
.input-color {
position: absolute;
right: -8px;
top: -8px;
width: 56px;
height: 56px;
border: none;
}
.input-color-label {
cursor: pointer;
text-decoration: underline;
color: #3498db;
}<div class="input-color-container">
<input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
I am a clickable label, try me
</label>这就是我最近为一个艺术项目所做的。我是新手，所以如果我做错了，请告诉我。
input[type=color]{
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: solid 1px #000; /*change color of the swatch border here*/
border-radius: 40px;
}<input type="color" value="#C899F5">在 @Henrique Rotava 的方法的基础上，我们可以利用隐藏的溢出和负边距来创建一个更灵活的包装器，并减少 CSS 标记。基本上，选择器变得足够大并且足够伸展，当包装器夹住它时，只有中间出现。
包装器必须声明一个widthand height，这对于您想要设置包装器样式的大多数用例来说应该没问题，而不是input. 否则元素将不可见。对于包装器，所有其他格式都是可选的。
input[type='color'] {
padding: 0;
width: 150%;
height: 150%;
margin: -25%;
}
.cp_wrapper {
overflow: hidden;
width: 2em;
height: 2em;
/* optional formatting below here */
border-radius: 50%;
box-shadow: 1px 1px 3px 0px grey;
margin: 1em;
}<div class="cp_wrapper">
<input type="color" name="cp_1" value="#ff8888" />
</div>
<div class="cp_wrapper">
<input type="color" name="cp_2" value="#88ff88" />
</div>
<div class="cp_wrapper">
<input type="color" name="cp_3" value="#8888ff" />
</div>不幸的是，颜色输入非常挑剔。不同的浏览器对待它们的方式不同。例如，Chrome 将根据width/ height+调整输入的大小border-width。另一方面，Firefox 将使用width/height和border-width. 这使得等间距非常困难，就其<input type=color>本身而言。
然而，我们能做的就是移除除了选取的颜色本身之外的所有内容，并在其周围放置一个包装器，以便能够更可预测地处理输入周围的间距。
label.color-picker {
width: 150px; /* Width of color picker */
border: 1px solid #ccc; /* Outer border */
border-radius: 3px; /* Border radius of outer border */
padding: 5px; /* Space between outer border and color picker */
background: #fff; /* Color between outer border and color picker */
display: block; /* Contain color picker within label */
}
label.color-picker > span {
border: 1px solid #ccc; /* Border around color in color picker */
display: block; /* Contain color picker within span */
}
label.color-picker > span > input[type=color] {
height: 10px; /* Height of color picker */
display: block; /* Avoids space above/below color picker */
width: 100%; /* Fill available horizontal space */
border: none; /* Remove browser's border */
padding: 0px; /* Remove space around color picker in Chrome */
}
/* Chrome styles */
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper {
padding: 0; /* Remove browser's padding around color picker */
}
label.color-picker > span > input[type=color]::-webkit-color-swatch {
border: none; /* Remove browser's border around color in color picker */
}
/* Firefox styles */
label.color-picker > span > input[type=color]::-moz-color-swatch {
border: none; /* Remove browser's border around color in color picker */
}
label.color-picker > span > input[type=color]::-moz-focus-inner {
border: none; /* Remove browser's padding around color in color picker */
padding: 0; /* Remove browser's padding around color in color picker */
}<label class="color-picker">
<span>
<input type=color value="#ff00ff">
</span>
</label>这是漂亮的小颜色输入设计，您可以禁用默认框架-webkit-appearance: none，然后提供所需的样式。跳这有帮助:)
input[type="color"] {
-webkit-appearance: none;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
padding: 0;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}<input type=color value="#A4A4A4">此处未提及的另一种方法使用在输入元素本身上设置的自定义属性（变量），并由onInput元素上的事件处理程序直接控制。由于 CSSattr目前是无单元的，所以别无选择，只能创建一个类型的变量color并使用它。
这有点麻烦，但 HTML 仍然是单元素。
input[type=color]{
--size: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
border: 0;
padding: 0;
width: 0;
height: 0;
background: white;
margin: calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
}
input[type=color]::before{
content: '';
display: block;
background: var(--value);
text-transform: uppercase;
width: var(--size);
height: var(--size);
margin: calc(var(--size)/2) 0 0 calc(var(--size)/2);
border: 2px black;
position: relative;
z-index: 1;
border-radius: 50%;
cursor: pointer;
}<input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" />attr() 类型语法（尚未完成）CSS有一个非常酷的新特性在这种情况下很有帮助，因为它可以访问value输入的动态属性并在伪元素中使用它。显然type="color"允许伪元素。
在撰写本文时，没有浏览器支持此功能，该功能允许在输入的伪元素type中attr()如此有效地attr指定，从而允许完全自定义：background
input[type=color]{
appearance: none;
margin: 0;
border: 0;
padding: 0;
width: 0;
height: 0;
margin: -100px 0 0 -100px;
}
input[type=color]::before{
content: '';
display: block;
background: white;
background: attr(value color, white);
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: 2px black;
position: relative;
z-index: 1;
border-radius: 50%;
}<input type="color" value="#ff0000" />我认为这个解决方案比目前选择的 Keishi Hattori 最好。Keishi Hattori 的解决方案会在所选颜色周围留下暗淡的颜色，并且需要设置宽度/高度，如果添加边框则效果不佳。
我发现以下解决方案效果更好。
input[type="color"] {
-webkit-appearance: none;
position:relative;
}
input[type="color"]::-webkit-color-swatch {
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
box-sizing: border-box;
border:1px solid transparent;
}<input type="color" value="#ff0000">如果需要，您可以添加边框。
input[type="color"].withborder {
-webkit-appearance: none;
position:relative;
border:1px solid #000;
}
input[type="color"].withborder::-webkit-color-swatch {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
box-sizing: border-box;
border:1px solid transparent;
}<input type="color" class="withborder" value="#ff0000">如果需要，您可以在 input[type="color"] 中添加背景。您需要更改 ::-webkit-color-swatch 中的 0px。
input[type="color"].withborder {
-webkit-appearance: none;
position:relative;
border:1px solid #000;
background:#bbb;
}
input[type="color"].withborder::-webkit-color-swatch {
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
box-sizing: border-box;
border:0px solid transparent;
}<input type="color" class="withborder" value="#ff0000">This may work, except IE.
input[type=color]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
border: 0;
padding: 0;
/*input[type=color] double the scale and clip the offset*/
-webkit-transform: scale(2);
transform: scale(2);
-webkit-clip-path: inset(25%);
clip-path: inset(25%);
}
input[type=color]:before{
content: attr(value);
text-shadow:.1em .1em #fff;
font-size:.5em;
width:50%;height:50%;
left:25%;top:25%;
text-align:center;
position:absolute;
background-image: url('data:image/gif;base64,R0lGODlhBgADAPABAICAgAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJFAABACwAAAAABgADAAACBkxggGfMBQAh+QQJFAABACwAAAAABgADAAACBQximHZbACH5BAUUAAEALAAAAAAGAAMAAAIFRGKXiVoAOw==');
}<input type="color" value="#ff0000" />
<input type="color" value="#00ff00" />
<input type="color" value="#0000ff" />我的方法：
<div class="user__colors">
<label><input type="color"/></label>
</div>
input {
background-color: transparent;
border: none;
position: relative;
width: 80px;
height: 12px;
&:after {
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
background: url(../img/color-palette.jpg) repeat-y 0 0;
background-size: contain;
top: 0;
border-radius: 3px;
}
}
它看起来像这样： http: //prntscr.com/gloozc
但是如果你按下 Ctl+F5，你会看到原始输入片刻。