Webkit CSS 来控制 input[type=color] 中颜色周围的框?

问题描述

是否有特定于 Webkit 的 CSS 样式可以让我控制 input[type=color] 中颜色周围框的颜色/大小/样式?

我已经设置了输入的颜色和背景颜色，因此它与我用于旧版 Chrome 和 Firefox 的交叉兼容性 polyfill 看起来不错.

现在 Chrome 实际上有一个颜色选择器，颜色周围有一个框，当颜色和背景都在输入的中间时，会留下一个 1px 灰色框浮动输入的颜色设置为相同的颜色.

是否有一些 CSS 可以摆脱它，或者通过将该框的宽度设置为 0，将样式更改为 none，或者，最坏的情况是将颜色设置为与颜色相同，并且背景颜色?

---

在这张图片中，我指的是白色区域周围和绿色区域外的灰色框:

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

解决方案

WebKit 具有 特殊 CSS选择器您可以用来自定义表单控件，但它们不是官方的.
将来对 WebKit 的更新可能会破坏它.

请勿将其用于生产！！

但可以随意将其用于个人项目:)

方法一

使用 webkit 特定的选择器来主要隐藏输入的非彩色部分.

input[type="color"] {-webkit 外观:无；边界:无；宽度:32px；高度:32px；}input[type="color"]::-webkit-color-swatch-wrapper {填充:0；}input[type="color"]::-webkit-color-swatch {边界:无；}

方法二

隐藏颜色输入 (opacity:0) 并使用 JavaScript 将包装器的背景设置为输入的值.

var color_picker = document.getElementById("color-picker");var color_picker_wrapper = document.getElementById("color-picker-wrapper");color_picker.onchange = 函数(){color_picker_wrapper.style.backgroundColor = color_picker.value;}color_picker_wrapper.style.backgroundColor = color_picker.value;

input[type="color"] {不透明度:0；显示:块；宽度:32px；高度:32px；边界:无；}#color-picker-wrapper {向左飘浮;}

<input type="color" value="#ff0000" id="color-picker">

Is there a Webkit-specific CSS style that will allow me to control the color/size/style of the box around the color in an input[type=color]?

I'm setting the color and background color of the input already so it looks good with a cross-compatibility polyfill I'm using for older Chrome and Firefox.

Now that Chrome actually has a color picker, there'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's width to 0, changing the style to none, or, at worst, setting the color to the same as the color and background color?

---

In this image, I'm talking about the grey box around the white area and outside the green:

I've found one workaround, which is to set a high enough padding that the box (the grey border and green contents) is squished to size 0. But that's really hacky, and doesn't look very good over in Firefox.

解决方案

WebKit has special CSS selectors you can use to customize form controls but they aren't official.
An update to WebKit in the future will probably break it.

Please don't use it for production!!

But feel free to play with it for personal projects :)

Method 1

Uses webkit-specific selectors to mostly hide the non-colored part of the input.

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

Method 2

Hides the color input (opacity:0) and uses JavaScript to set the background of the wrapper to the input's value.

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>

这篇关于Webkit CSS 来控制 input[type=color] 中颜色周围的框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！