如何去掉复选框的边框？

Question

是否有可能去掉复选框周围的边框, 使其看起来不可见? 我已将它放在带有背景颜色的DIV中。

- Erik

---

对于所有其他元素，我会说border-width: 0，但是我在Firefox中尝试过，即使我尝试在Firefox开发者控制台中更改它，它始终以width: 1.6显示边框。 - Radon8472

对于那些在设计复选框方面遇到困难的人，可以参考这个答案：https://stackoverflow.com/a/58792508/9158986 - undefined

Answer 1

当我在谷歌搜索“去除复选框边框”时，这是我得到的第一个结果。让我提一下，除了IE外，所有浏览器都可以使用appearance属性来去除复选框的默认样式：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

- Petar

---

由于这个线程在谷歌搜索中排名第一，有人应该把你的答案标为正确答案！ - Noam L

当我添加这个之后，我就不能再点击复选框了。 - undefined

Answer 2

很遗憾，无法去除浏览器原生复选框的边框（这在所有浏览器中都不起作用），您需要编写自己的类似复选框的状态小部件来实现此功能。如果想要将常规表单控件风格化，请查看 Nice forms

- naikus

Answer 3

对于FireFox：尝试使用border:none。

对于IE：尝试使用style="background:transparent;border:0"。

另一种解决方案是创建自己的图像，用于显示选中和未选中状态，并在图像的onclick事件中进行相应的处理。

- Greg McNulty

---

适用于删除IE8中边框的样式：style="background:transparent;border:0" - Justin

在当前的火狐版本中无法运行。即使我将边框或边框宽度设置为0，火狐也会将其更改为1.6（即使我直接在火狐调试控制台中编辑边框宽度）。像其他答案中所说的添加“appearance: none;”这样的代码，拯救了我的一天。 - Radon8472

Answer 4

我知道这是一个晚回答，但我与一位CSS专家合作，他给了我一种在IE10中消除复选框（和可能的单选按钮）周围边框的方法：

• 将边框颜色设置为页面背景相同的颜色。
• 对其应用“none”的盒子阴影。

就这样。像魔法一样奏效！

- dauber

Answer 5

input[type="checkbox"] {
    width: 25px;
    height: 25px;
    background: gray;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    position: relative;
    left: -5px;
    top: -5px;
    cursor: pointer;
}

- Codemaker

Answer 6

我刚刚尝试了一些相关的东西，希望能解决你的问题！

实际上，你不能仅移除边框，但你可以使用外观属性来移除整个元素体，然后你可以实现你的样式并将复选框制作成你想要的样子... 在下面你可以看到：

input[type='checkbox']{
transform:scale(2);
appearance:none;
border:2px solid black;
height:50px;
width:50px;
margin-left:2em; margin-top:2em; font-size:40px; position:relative; }
input[type='checkbox']:checked:before{
 content:'\2713'; background:blue; width:100%; height:100%; top:0;
left:0;
 display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; }

<input type='checkbox'>

- itsmyself stylish

Answer 7

在CSS中，可以通过将Webkit外观设置为none来实现。类似这样的代码：

-webkit-appearance: none;

- Oluwatobi Omotayo

Answer 8

你需要使用一些小部件或自定义UI来去除边框。

我不确定这是否有效：<input type="checkbox" style="border: 0;" />

- tr4656