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

Question

我使用JavaScript生成的HTML5颜色选择器元素让用户设置另一个元素的颜色。当浏览器执行时，它会绘制一个矩形来显示当前选定的颜色。我将这个矩形称为“颜色井”。颜色井是可以被样式的：

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;，浏览器会在内层白色边框外围添加一条细黑边，但并不改变内层边框的颜色。

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

John Topley · Answer

由于颜色选择器的渲染主要受浏览器控制且难以自定义样式，您可以选择将其嵌入一个包装div中，并将该div的透明度设置为零，同时保留一种方式来选取所选颜色以样式化这个包装div。

这里我使用了一个应用了CSS规则.colorpicker的包装div，并通过在嵌入的颜色选择器上触发oninput事件时调用的函数来控制其背景颜色：

Sean Bright · Answer

根据Diego的建议，你可以通过将颜色输入框嵌入一个包装器（wrapper）并在change事件触发时更新背景颜色来解决这个问题。以下是一个可复用的函数（可视为一个小型插件），它可以用来处理多个输入框，并且能够与预设了value属性的输入框保持同步。

此解决方案不仅展示了如何即时反映用户通过颜色选择器做出的选择，还通过包装颜色输入框并隐藏实际的输入控件，间接实现了去除你想要去掉的“白色边框”效果。通过将颜色选择器设置为透明并覆盖整个包装器，用户点击时实际上是在改变包装器的背景色，从而模拟了一个自定义风格的颜色选择器。

以下是解决方案的核心代码概述：

/* CSS样式 */
.color-picker {
  /* 设置样式以适应颜色选择的需求 */
}
.color-picker > input[type="color"] {
  /* 使颜色输入框透明且铺满整个包装器 */
  opacity: 0;
  position: absolute;
  flex: 1;
  cursor: pointer;
}

// JavaScript逻辑
function CustomColorPicker(className = '.color-picker') {
  // 同步包装器颜色与输入框选中颜色的函数
  function syncWithInput(colorPicker) {
    // 确保colorPicker存在且包含一个颜色输入框
    const input = colorPicker.querySelector('input[type="color"]');
    if (input) {
      // 更新包装器的背景色和tooltip信息
      colorPicker.style.backgroundColor = input.value;
      colorPicker.title = input.value;
    }
  }

  // 处理颜色变化的事件处理器
  function handleColorChange(event) {
    syncWithInput(event.target.closest(className));
  }

  // 初始化：同步所有现有颜色选择器的显示
  document.querySelectorAll(className).forEach(syncWithInput);

  // 添加事件监听器以响应颜色选择器的变化
  document.addEventListener('change', handleColorChange);

  // 返回一个清理函数，用于移除事件监听器
  return function() {
    document.removeEventListener('change', handleColorChange);
  };
}

// 初始化插件
const destroyPlugin = CustomColorPicker();

// 可选：提供一个销毁插件的功能
function destroy() {
  destroyPlugin(); // 调用清理函数
  console.log('插件已销毁');
}

Ben Voigt · Answer

补充说明：
我本应更清楚地说明我想要移除内部白色边框的原因：如果能成功移除该边框，就能通过将颜色选择框的尺寸样式设置为零，使选择器元素变得不可见。接着，利用模拟的鼠标事件，我可以使得在任何元素（文本、SVG形状等）上的点击直接触发浏览器的颜色对话框。这样一来，就可以利用浏览器提供的完整颜色选择工具集，包括颜色轮、HSB滑块、保存的颜色、吸管选择器等，来设定元素的颜色。

然而，我发现即便将颜色选择框的宽度和高度设置为0，虽然颜色选择框消失了，但在Safari 14浏览器中仍会留下一小块白色方块，这似乎是白色边框的残余。对于我最初问题的回答表明，要可靠地（跨浏览器）移除这个小白方块可能比较困难。

不过，不必灰心。因为我正在模拟鼠标事件以弹出颜色选择器，所以颜色选择框及其边框并不需要可见。我可以在浏览器绘制它之前，将其样式设置在屏幕之外，这样对用户来说，就好像是直接点击屏幕上元素后弹出了选择颜色的界面。虽然这是一种权宜之计，但用户的体验正是我所追求的。

注1：关于如何模拟鼠标点击，请参阅此回答。感谢@Iván！

注2：关于我的原始问题有详细讨论及解决方案，请参阅此回答。感谢@CBroe的评论指出了这一点。

注3：我花了好几天时间寻找解决方案并尝试不同的方法。上述注2中提及的StackOverflow页面本可以迅速解决我的问题。不幸的是，该页面标题特别提到了“颜色周围的框”，而我在搜索“颜色选择器边框”等相关术语时，从未找到过这个页面。通常情况下，StackOverflow的良好编辑工作在此处似乎并未体现。