css设置按钮隐藏,用css隐藏检查单选按钮-CSDN博客

7 个答案:

答案 0 :(得分：19)

只是一点提示，如果你仍然想要使用所有浏览器对无线电和复选框的本机支持，比如用↑和↓键在它们之间移动，将css设置为position:fixed;opacity:0，这将保留所有功能但保持输入隐藏，不会占用任何布局空间。我花了最后3个小时搞清楚这一点，但它确实有效！

答案 1 :(得分：15)

除了Nathan Lee的回答

input[type="radio"]:checked{

visibility:hidden;

}

是指定已选中单选按钮的选项

input[type="radio"][value="text"]:checked{

visibility:hidden;

}

是一个指定已选中单选按钮的选项，其值等于'text'(示例中为'none')

答案 2 :(得分：6)

尝试visibility:hidden;这会有效。

HTML：

CSS：

input.checked[type="radio"]{visibility:hidden;}

我希望这就是你要找的东西。

答案 3 :(得分：5)

如果你想多次隐藏一个复选框/收音机，那就是制作一个自定义的复选框/收音机。

如果您希望能够专注于输入的标签，请使用opacity：0;位置：绝对的;宽度：0;这使得输入在不占用空间的情况下不可见。

如果你使用display：none;或能见度：隐藏;它会有类似的效果，但目前最常用的浏览器(MSIE11，Edge，Chrome 60.0.3112.101，Firefox 55)不允许使用键盘来关注元素，这使得它不易访问。

＆＃13;

.opacity {

position: absolute;

opacity: 0;

width: 0;/* for internet explorer */

}

.visibility {

visibility: hidden;

}

.nodisplay {

display: none;

}

input[type=checkbox]+label {

font-weight: normal;

}

input[type=checkbox]:checked+label {

font-weight: bold;

}

input[type=checkbox]:focus+label {

border: 1px dotted #000;

}＆＃13;

Press space to (un)check

＆＃13;＆＃13;＆＃13;

答案 4 :(得分：1)

尝试使用:checked选择器：

input[type="radio"]:checked {

display: none;

}

答案 5 :(得分：1)

如果您使用过{display：none;}并且仍然看到一个空格(如3px左右)，那么很可能您的html中的元素之间有空格或换行符，有时会导致渲染器在这些元素之间显示一些像素。

这确实存在问题，如果没有这方面的知识就很难确定问题，但是一旦你知道，你有两个简单的解决方案：

要么删除html中代码之间的空白区域。 (不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。)

或者，在您的css中，将父容器中的font-size设置为0px。

例如：#parent{font-size:0px;}然后再次为#parent *{font-size:initial;}的父级的所有孩子初始化它。

醇>

#parent{

font-size:0px;

display:block;

}

#parent *{

font-size:initial;

}

.tab-label {

display:inline-block;

background: #eee;

border: 1px solid;

}

[name="tab-group-1"] {

display: none;

}

Tab One

Tab Two

Tab Three

答案 6 :(得分：0)

除了其他答案中提到的问题(特别是可访问性问题)之外，display: none的一个警告是，当无线电输入为required时，它还会影响浏览器显示的警告，并且用户没有检查它。

另一方面，opacity: 0和visibility: hidden的一个警告是，单选按钮仍会占用一些空间(而AFAICS width: 0px无效)可能是问题(例如，是否对齐，或者您的单选按钮是否位于

标签内，并且您希望上的:hover背景颜色发生变化，在这种情况下，标签必须覆盖{ {1}}。

一种解决方法是将单选按钮的

设置为position。

fixed

input[type=radio] {

opacity: 10;

position: fixed;

}

input[type=radio]+label {

background-color: #eee;

padding: 1em;

}

如摘要所示(使用

radio1

radio2而不是0只是为了了解我们在说什么)，使用opacity: 10的单选按钮不再影响标签。