如何删除颜色输入的边框？

Question

我使用 JavaScript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行

input type="color"

时，它会绘制一个显示当前所选颜色的矩形。我将这个矩形命名为“颜色井”。颜色很好可以设计：

const pickerElem = document.createElement('input');
pickerElem.setAttribute ('type', 'color');
pickerElem.setAttribute ('style',  "position: absolute; "
  + "top: 10px;" + "left: 10px;"
  + "width: 100px;" + "height: 100px;");
document.body.appendChild(pickerElem);

这会按预期很好地绘制颜色，但带有大约五个像素宽的白色边框。我想删除白色边框。

我尝试向样式添加以下属性：

border: none;

、

border-style: hidden;

、

padding: 0;

、

margin: 0;

和

border-color: none;

，但浏览器会忽略它们。

如果我使用

border-color: black;

，浏览器会在内部白色边框周围添加一个细黑色边框，但不会更改内部边框颜色。

如何设计选择器的样式以完全删除内部白色边框？

Answer 1

由于颜色选择器渲染主要由浏览器控制并且难以自定义样式，因此您可以选择将其嵌入到包装器 div 中并将其不透明度设置为零，但仍然有办法选择为此类包装器设计样式所选择的颜色。

这里我使用了一个包装器 div，其样式采用 css 规则

.colorpicker

，其背景颜色由嵌入颜色选择器上的

oninput

事件触发时调用的函数控制：

function changeWrapperColor(embeddedColorPicker) {
  embeddedColorPicker.parentElement
    .style.backgroundColor = embeddedColorPicker.value;  
}

.colorpicker {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
  border: dashed 4px gray;
}

.colorpicker input[type="color"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<div class="colorpicker">
  <input type="color" oninput="changeWrapperColor(this)"/>
</div>