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

Posted 2023-02-16

技术标签:

【中文标题】Webkit CSS来控制输入[type = color]中颜色周围的框？【英文标题】：Webkit CSS to control the box around the color in an input[type=color]? 【发布时间】：2012-06-25 09:45:41 【问题描述】：

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

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

现在 Chrome 实际上有一个 颜色选择器，当输入的颜色和背景颜色都为设置为相同的颜色。

是否有一些 CSS 可以摆脱它，或者通过将该框的宽度设置为 0，将样式更改为 none，或者，最糟糕的是，将颜色设置为与颜色和背景颜色相同？

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

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

【问题讨论】：

你说的是左边的盒子吗？是的。那是实际的输入；右边的是颜色选择器。 Color Inputs: A Deep Dive 2020，作者：安娜·都铎 【参考方案1】：

在@Henrique Rotava 的方法的基础上，我们可以利用隐藏的溢出和负边距来创建更灵活的包装器，并减少 CSS 标记。基本上，选择器变得足够大并且足够伸展，以至于当包装器剪辑它时，只有中间出现。

包装器必须声明width 和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>

【讨论】：

这是一个干净的纯 CSS 解决方案，干得好。【参考方案2】：

这里没有提到的另一种方法是使用在输入元素本身上设置的自定义属性（变量），并由直接在元素上的onInput 事件处理程序控制。由于 CSS attr 目前是无单元的，所以别无选择，只能创建一个 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;

&lt;input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" /&gt;

2020 年 10 月：新的 `attr()` type 语法（尚未完成）

very cool new feature 出现在 CSS 中，这在这种情况下很有帮助，因为它可以访问输入的动态 value 属性并在伪元素中使用它。显然type="color" 允许伪元素。

截至撰写本文时，没有浏览器支持此feature，它允许在attr() 中指定type，因此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%;

&lt;input type="color" value="#ff0000" /&gt;

【讨论】：

【参考方案3】：

这是漂亮的小颜色输入设计，您可以通过-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;

&lt;input type=color value="#A4A4A4"&gt;

【讨论】：

【参考方案4】：

我认为这个解决方案比目前选择的 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;

&lt;input type="color"  value="#ff0000"&gt;

您可以根据需要添加边框。

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;

&lt;input type="color" class="withborder"  value="#ff0000"&gt;

如果需要，您可以在 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;

&lt;input type="color" class="withborder"  value="#ff0000"&gt;

【讨论】：

【参考方案5】：

这可能有效，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" />

【讨论】：

【参考方案6】：

一个好的解决方法是：

将颜色选择器包装在标签中。将颜色选择器的可见性设置为 false。将标签的背景颜色绑定到颜色选择器的值。

现在，您有了一个易于设置样式的标签，单击该标签会打开您的颜色选择器。正如在 cmets 中所讨论的，单击标签会激活颜色选择器没有任何 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/

【讨论】：

我刚刚对“文件”输入元素做了同样的事情。它工作得很好。我将其宽度和高度设置为 0，并将溢出设置为隐藏，然后按我喜欢的方式设置标签的样式。 @Frank 我可能误解了你，但是如果你使用 JS 来点击文件输入，这在 IE 中将不起作用，因为这被视为安全风险。你可能只是别人的提醒卢克，看看小提琴——它不是基于 JS 的。根据规范，如果您将input 放入label，则单击label 会触发input。这与您通过单击标签使整个复选框可切换的方式相同。如果有人决定在 5 年后的 2020 年使用它，它将无法在 Safari ios 中使用，因为 Safari iOS 不支持颜色输入。【参考方案7】：

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

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;

&lt;input type="color" value="#C899F5"&gt;

【讨论】：

非常适合 IE/Opera/Safari/Edge 快速轻松，无需添加其他 html 元素。我和这个一起去了。谢谢！【参考方案8】：

我的方法：

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

【讨论】：

【参考方案9】：

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

【讨论】：

这很有帮助，在 Edge、Chrome、Firefox 中运行良好 - 谢谢【参考方案10】：

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

【讨论】：

【参考方案11】：

WebKit 有 special CSS selectors 可用于自定义表单控件，但它们不是官方的。未来对 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;

&lt;input type=color value="#ff0000"&gt;

方法二

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

【讨论】：

哇，它们让那些很难找到。谢谢：D 方法 2 在 Chrome、Firefox 和 Opera 上正常运行。仅供参考，Firefox 的等效伪元素是 -moz-color-swatch（Firefox thouhg 上没有 color-swatch-wrapper 伪元素）方法一在 2020 年仍然适用于现代 Chrome，使用 one crazy caveat - 您必须自己声明规则，即不能在单个规则中组合 -webkit 和 -moz 前缀。今天用了这个，只是想加上方法1结合input[type="color"]:focus outline: none !important; border: 0px; box-shadow: 0; 让它看起来像方法2没有js，通过消除焦点边框。

以上是关于Webkit CSS来控制输入[type = color]中颜色周围的框？的主要内容，如果未能解决你的问题，请参考以下文章

html5中如何去掉input type date默认样式

css元素hover時控制另一个元素的显示隐藏

CSS屏蔽Webkit浏览器input高亮和textarea缩放

input type="tel" 输入框显示密文

IOS下移除按钮原生样式 -webkit-appearance

苹果系统css样式变化

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

2020 年 10 月：新的 attr() type 语法（尚未完成）

方法一

方法二

2020 年 10 月：新的 `attr()` type 语法（尚未完成）