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

yfjy0ee7  于 2022-12-15  发布在  其他
关注(0)|答案(4)|浏览(121)

我想删除Firefox中输入[type=color]颜色的边框。我找到了Chrome here的解决方案(在CSS中用途::-webkit-color-swatch),我也需要它用于Firefox和Microsoft Edge。谢谢!
例如,在这张图片中,我想删除粉红色周围的黑色边框,而不是input的蓝色边框(这个蓝色边框是Bootstrap的表单控件类,我不询问它)x1c 0d1x

c7rzv4ha

c7rzv4ha1#

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

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

eqfvzcg82#

这将是更好地使其共同为所有,试试这个:

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


如果焦点在input字段上,请使用以下命令:

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

张贴您的代码,如果这不是你要找的!

更新

将代码放入::-moz-color-swatch{ }

67up9zun

67up9zun3#

您可以将border-color: transparent添加到输入框中。

aiazj4mn

aiazj4mn4#

如果有人面临这个问题,这对我很有效:

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生成器here

相关问题