我想删除Firefox中输入[type=color]颜色的边框。我找到了Chrome here的解决方案(在CSS中用途::-webkit-color-swatch),我也需要它用于Firefox和Microsoft Edge。谢谢!例如,在这张图片中,我想删除粉红色周围的黑色边框,而不是input的蓝色边框(这个蓝色边框是Bootstrap的表单控件类,我不询问它)x1c 0d1x
c7rzv4ha1#
它类似于::-webkit-color-swatch。
::-webkit-color-swatch
::-moz-color-swatch { border-color: red; }
eqfvzcg82#
这将是更好地使其共同为所有,试试这个:
input[type="text"]{ border: none; border-color: transparent; }
或如果焦点在input字段上,请使用以下命令:
input
input[type="text"]:focus{ outline: none; }
张贴您的代码,如果这不是你要找的!
更新
将代码放入::-moz-color-swatch{ }
::-moz-color-swatch{ }
67up9zun3#
您可以将border-color: transparent添加到输入框中。
border-color: transparent
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
4条答案
按热度按时间c7rzv4ha1#
它类似于
::-webkit-color-swatch
。eqfvzcg82#
这将是更好地使其共同为所有,试试这个:
或
如果焦点在
input
字段上,请使用以下命令:张贴您的代码,如果这不是你要找的!
更新
将代码放入
::-moz-color-swatch{ }
67up9zun3#
您可以将
border-color: transparent
添加到输入框中。aiazj4mn4#
如果有人面临这个问题,这对我很有效:
将提供纯CSS生成器here