是否有一个Webkit特定的CSS样式，允许我控制 input[type=color] 中颜色周围的框的颜色/大小/样式？我'm setting the color and background color of the input already so it looks good with a cross-compatibility polyfill I' m用于较旧的Chrome和Firefox . 但是现在Chrome实际上有一个颜色选择器，'s a box around the color which leaves a 1px grey box floating in the middle of the input when both color and background color of the input are set to the same color. Is there some CSS to get rid of it, either by setting that box'的宽度为0，将样式更改为 none ，或者最坏的情况是将颜色设置为与颜色和背景颜色相同？

在这张图片中，我说的是白色内部和绿色外部的灰色框：

Screenshot of color picker

我找到了一个解决方法，即设置一个足够高的填充，框（灰色边框和绿色内容）被压缩到0大小 . 但这真的很糟糕，并且在Firefox中看起来不太好 .

6 回答

WebKit有special CSS selectors您可以用来自定义表单控件但它们不是官方的 .
未来对WebKit的更新可能会破坏它 .

Please don't use it for production!!

但随意玩个人项目:)

方法1

使用特定于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">

方法2

隐藏颜色输入（ 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>

回复于 2024-04-29T18:26:57+08:00

4
一个好的解决方法是：

1.将您的颜色选择器包裹在标签中 . 2.将颜色选择器的可见性设置为false . 3.将标签的背景颜色绑定到颜色选择器的值 .

现在，你有一个简单的样式标签，点击它，打开你的颜色选择器：

JSFiddle
```
<label id="test_wrapper"><input id="inp" type="color"></label>
```
回复于 2024-04-29T18:26:57+08:00

我想使用一个简单的解决方案，但不是那么优雅 . 您可以使用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>

回复于 2024-04-29T18:26:57+08:00

不幸的是，颜色输入非常挑剔 . 不同浏览器以不同方式对待例如，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>

回复于 2024-04-29T18:26:57+08:00

这就是我最近为艺术项目做的事情 . 我是新手，所以如果我做错了，请告诉我 .

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

回复于 2024-04-29T18:26:57+08:00

-2

我的方法：

<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，你会看到原始输入片刻 .

回复于 2024-04-29T18:26:57+08:00

Webkit CSS控制输入[type = color]中颜色周围的框？

6 回答

方法1

方法2

相关问题