时间戳

首页 > 解决方案 > 删除 type=color 中的内边框

html - 删除 type=color 中的内边框

问题描述

当我使用 type=color 作为输入时，它有两个边框。设置border=none 只会移除外边框。但是，里面有一个很小的。我尝试了许多其他属性，但结果仍然相同。这是我的代码：

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
<input type="color" name="name1" id="name1" value="#ffffff">

这就是我的意思：https ://ibb.co/N3nVFqn 我基本上想删除那个边框。

标签： htmlcssfirefox

解决方案

使用::-webkit-color-swatch选择器。

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-webkit-color-swatch{
  border:none;
}
<input type="color" name="name1" id="name1" value="#ffffff">

对于 Mozilla Firefox，请使用::-moz-color-swatch：

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-moz-color-swatch{
  border:none;
}
<input type="color" name="name1" id="name1" value="#ffffff">

推荐阅读