是否有可能去掉复选框周围的边框, 使其看起来不可见? 我已将它放在带有背景颜色的DIV中。
当我在谷歌搜索“去除复选框边框”时,这是我得到的第一个结果。让我提一下,除了IE外,所有浏览器都可以使用appearance
属性来去除复选框的默认样式:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
很遗憾,无法去除浏览器原生复选框的边框(这在所有浏览器中都不起作用),您需要编写自己的类似复选框的状态小部件来实现此功能。如果想要将常规表单控件风格化,请查看 Nice forms
对于FireFox:尝试使用border:none。
对于IE:尝试使用style="background:transparent;border:0"。
另一种解决方案是创建自己的图像,用于显示选中和未选中状态,并在图像的onclick事件中进行相应的处理。
style="background:transparent;border:0"
- Justin我知道这是一个晚回答,但我与一位CSS专家合作,他给了我一种在IE10中消除复选框(和可能的单选按钮)周围边框的方法:
就这样。像魔法一样奏效!
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;
}
实际上,你不能仅移除边框,但你可以使用外观属性来移除整个元素体,然后你可以实现你的样式并将复选框制作成你想要的样子... 在下面你可以看到:
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'>
-webkit-appearance: none;
你需要使用一些小部件或自定义UI来去除边框。
我不确定这是否有效:<input type="checkbox" style="border: 0;" />
border-width: 0
,但是我在Firefox中尝试过,即使我尝试在Firefox开发者控制台中更改它,它始终以width: 1.6
显示边框。 - Radon8472