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

时间：2012-06-23 05:58:59

标签： css html5 google-chrome webkit color-picker

是否有特定于Webkit的CSS样式允许我控制input[type=color]中颜色周围框的颜色/大小/样式？我已经设置了输入的颜色和背景颜色，所以看起来很好用我用于旧版Chrome和Firefox的交叉兼容性polyfill。但是现在Chrome实际上有一个颜色选择器，当输入的颜色和背景颜色设置为相同的颜色时，颜色周围有一个框，在输入的中间留下1px的灰色框。是否有一些CSS可以摆脱它，通过将该框的宽度设置为0，将样式更改为none，或者最坏的情况是将颜色设置为与颜色和背景颜色相同？

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

Screenshot of color picker

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

11 个答案:

答案 0 :(得分：40)

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

请不要将其用于制作!!

但是可以随意玩个人项目：）

方法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>

答案 1 :(得分：9)

一个好的解决方法是：

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

    4. 现在，您有一个易于样式的标签，点击后打开您的颜色选择器。正如评论中所讨论的，单击标签可以激活颜色选择器，而无需任何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/

答案 2 :(得分：4)

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

答案 3 :(得分：3)

不幸的是，颜色输入非常挑剔。不同的浏览器会以不同的方例如，Chrome会根据width / height + border-width调整输入的大小。另一方面，Firefox将使用width / height和border-width的最大值。这使得相等的间距非常困难，单独使用<input type=color>。

然而，我们可以做的是删除除拾取的颜色本身以外的所有内容，并在其周围抛出一个包装器，以便能够更加可预测地处理输入周围的间距。

＆＃13;
＆＃13; 
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 */
}
＆＃13; 
<label class="color-picker">
    <span>
        <input type=color value="#ff00ff">
    </span>
</label>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：3)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<input type="color" value="#C899F5">
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

这可能有效，但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 :(得分：0)

我认为这种解决方案比目前被选为最佳的服部启史更好。 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">

答案 7 :(得分：0)

这是一个不错的小颜色输入设计，您可以通过-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">

答案 8 :(得分：0)

此处未提及的另一种方法使用在输入元素本身上设置的自定义属性（变量），并由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;
}
<input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" />

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

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

在撰写本文时，没有浏览器支持此feature，该浏览器允许在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" />

答案 9 :(得分：0)

基于@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>

答案 10 :(得分：-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，你会看到原始输入片刻。

相关问题
最新问题