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

Question

提问by BrianFreud

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. But 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?

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

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

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

Screenshot of color picker

颜色选择器的屏幕截图

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.

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

Answer 1

回答by Keishi Hattori

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

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

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.

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

Method 2

方法二

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

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

Answer 2

回答by CodeToad

A good workaround is to:

一个好的解决方法是：

Wrap your color picker in a label.
Set the color picker's visibility to false.
Bind the label's background color to the value of the color picker.

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

Now, you have an easy to style label that when clicked, opens your color picker. As discussed in comments, clicking a label activates the color picker withoutany javascript; it's the default behaviour.

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

JSFiddle：https://jsfiddle.net/9zhap7rb/3/

Answer 3

回答by Henrique Rotava

I am using a simple solution, but not so elegant, I guess. You can wrap the input with a div and make the input bigger than the container, after that you can shape the container as you want. You can also use a label with a for attribute to create a clickable button with some text.

我正在使用一个简单的解决方案，但我猜不是那么优雅。您可以用 div 包装输入并使输入大于容器，然后您可以根据需要调整容器的形状。您还可以使用带有 for 属性的标签来创建带有一些文本的可点击按钮。

I have made an example:

我做了一个例子：

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

Answer 4

回答by 0b10011

Unfortunately, color inputs are quite finicky. Different browsers treat them differently. For example, Chrome will size the input based on width/height+ border-width. Firefox, on the other hand, will use the maximum of width/heightand border-width. This makes equal spacing quite difficult, with <input type=color>by itself.

不幸的是，颜色输入非常挑剔。不同的浏览器对它们的处理方式不同。例如，Chrome 将根据width/ height+调整输入的大小border-width。另一方面，Firefox 将使用width/height和border-width. 这<input type=color>本身就使得相等的间距变得非常困难。

However, what we cando is remove everything except for the picked color itself, and throw a wrapper around it that will be able to more predictably handle the spacing around the input.

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

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>

Answer 5

回答by Terran Webb

This is how I did it for a art project recently. I am a newbie, so let me know if I did this horribly wrong.

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

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

Answer 6

回答by Kurt Pachinger

This may work, except IE.

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

Answer 7

回答by v1nce

I think this solution is best than Keishi Hattori which is currently the chosen one. Keishi Hattori's solution leaves a dull color around the selected color and requires to set a width/height and does not work well if you add a border.

我认为这个解决方案比目前选择的 Keishi Hattori 最好。Keishi Hattori 的解决方案会在所选颜色周围留下暗淡的颜色，并且需要设置宽度/高度，如果添加边框则效果不佳。

I found the following solution to work better.

我发现以下解决方案可以更好地工作。

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

You can add a border if you want.

如果需要，您可以添加边框。

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

You can add a background in input[type="color"] if you want. You'll need to change the 0px in the ::-webkit-color-swatch.

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

Answer 8

回答by Dmitry PacificAtion

My method:

我的方法：

<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;
    }
}

And it view like this: http://prntscr.com/gloozc

它看起来像这样：http: //prntscr.com/gloozc

But if you press Ctl+F5, you`ll see original input for a moment.

但是如果你按 Ctl+F5，你会看到原始输入片刻。

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

提问by BrianFreud

回答by Keishi Hattori

Method 1

方法一

Method 2

方法二

回答by CodeToad

回答by Henrique Rotava

回答by 0b10011

回答by Terran Webb

回答by Kurt Pachinger

回答by v1nce

回答by Dmitry PacificAtion

相关推荐

最近更新

标签

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

提问by BrianFreud

回答by Keishi Hattori

Method 1

方法一

Method 2

方法二

回答by CodeToad

回答by Henrique Rotava

回答by 0b10011

回答by Terran Webb

回答by Kurt Pachinger

回答by v1nce

回答by Dmitry PacificAtion

相关推荐

HTML 标记中的链接内的标题或标题内的链接？

Html Bootstrap 3：有没有办法在使用小屏幕时隐藏导航栏文本？

Html 如何在 div 中垂直居中标签？

Html CSS 背景图片幻灯片

相关推荐

最近更新

标签