删除Firefox中输入[type = color]中颜色周围的边框？

Question

我想删除Firefox中input [type = color]的颜色周围的边框。我在这里找到了适用于Chrome的解决方案（在CSS中使用::-webkit-color-swatch），我也需要Firefox和Microsoft Edge的解决方案。谢谢！

例如，在这张照片中，我想删除粉红色周围的黑色边框，而不是输入的蓝色边框（此蓝色边框是Bootstrap的表单控件类，我不问这个问题）

Answer 1

类似于::-webkit-color-swatch。

::-moz-color-swatch {
    border-color: red;
}

Answer 2

最好让它对所有人通用，试试这个：

input[type="text"]{
    border: none;
    border-color: transparent;
}

或者

如果焦点位于该input字段上，请使用以下命令：

input[type="text"]:focus{
    outline: none;
}

如果这不是您要找的，请发布您的代码！

更新

把你的代码放进去::-moz-color-swatch{ }

Answer 3

如果有人遇到这个问题，这对我有用：

input[type="color"] {
  border-radius: 5px;
  padding: 0;
  border: 5px solid #DDD;
}

input[type="color"]::-moz-color-swatch {
  border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

<input type="color">

将在这里提供一个纯CSS生成器