Javascript：删除 HTML 颜色选择器边框

Question

我使用 Javascript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行时，它会绘制一个显示当前所选颜色的矩形。我将这个矩形命名为“颜色井”。颜色很好可以设计：

    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;” “填充：0；”，“边距：0；”和“边框颜色：无；”样式，但浏览器会忽略它们。如果我使用“边框颜色：黑色；”浏览器会在内部白色边框周围添加一个细黑色边框，但不会更改内部边框颜色。如何设置选择器的样式以完全删除内部白色边框？

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>