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


Webkit CSS to control the box around the color in an input[type=color]?

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

在这张图片中，我谈论的是白里绿外的灰色盒子：

Screenshot of color picker。

我发现了一个解决方法，那就是设置足够高的填充物，使框(灰色边框和绿色内容)压缩到0大小。但这真的很糟糕，在火狐中看起来不太好。

相关讨论

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

请勿用于生产！！

但是你可以自由地在个人项目中使用它：)

方法1

使用WebKit特定的选择器来隐藏输入的非彩色部分。

1
2
3
4
5
6
7
8
9
10
11
12
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;
}
1
<input type=color value="#ff0000">

号

方法2

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

1
2
3
4
5
6
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;
1
2
3
4
5
6
7
8
9
10
input[type="color"] {
    opacity: 0;
    display: block;
    width: 32px;
    height: 32px;
    border: none;
}
#color-picker-wrapper {
    float: left;
}

。

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

相关讨论

一个好的解决方法是：

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

    • 现在，您有了一个易于设置样式的标签，单击该标签时，将打开颜色选择器。如注释中所述，单击标签将激活颜色选择器，而不使用任何javascript；这是默认行为。

    1
    2
    3
    $(document).on('change', 'input[type=color]', function() {
      this.parentNode.style.backgroundColor = this.value;
    });

    。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    input {
      visibility: hidden;
    }

    label {
      background-color: black;
      height: 32px;
      width: 32px;
      position: fixed;
    }

    。

    1
    2
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    <label><input type="color"></label>

    jfiddle:https://jsfiddle.net/9zhap7rb/3/

    相关讨论

    我用的是一个简单的解决方案，但我想不是那么优雅。您可以用一个DIV包装输入，并使输入大于容器，然后您可以根据需要对容器进行造型。还可以使用带有for属性的标签来创建带有某些文本的可单击按钮。

    我举了一个例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .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;
    }

    。

    1
    2
    3
    4
    5
      <input id="input-color" value="#ed6868" class="input-color" type="color">

    <label class="input-color-label" for="input-color">
      I am a clickable label, try me
    </label>

    号

    不幸的是，颜色输入相当挑剔。不同的浏览器对它们的处理方式不同。例如，chrome将根据width/height+border-width调整输入的大小。另一方面，火狐将最多使用width/height和border-width。这使得等间距非常困难，因为本身就很难实现。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    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 */
    }

    。

    1
    2
    3
    4
    5
    <label class="color-picker">
        <span>
            <input type=color value="#ff00ff">
        </span>
    </label>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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;
    }

    号

    1
    <input type="color" value="#C899F5">

    号

    我的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
        <label><input type="color"/></label>


    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，你会看到一瞬间原始输入。