我想知道是否有可能隐藏选中的单选按钮与css使用:
{ display:none; }
我不知道如何处理这个元素。选中的单选按钮总是显示“无”,这对用户没有任何意义,我希望隐藏它。这可能吗?谢谢你的指点。
mitkmikd1#
只是一个小提示:如果你仍然想使用浏览器对收音机和复选框的所有原生支持,比如用↑和↓键在它们之间移动,那么将css设置为:
position: fixed; opacity: 0; pointer-events: none;
这将保留所有功能,但保持输入隐藏,不会占用任何布局空间。我花了3个小时才弄明白,但它确实有效!
fgw7neuy2#
对Nathan Lee答复的补充
input[type="radio"]:checked{ visibility:hidden; }
是指定选中单选按钮的选项
input[type="radio"][value="text"]:checked{ visibility:hidden; }
是一个选项,用于指定选中的单选按钮,其值等于"text"(在示例中为"none")更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors如果这个值是未知的,一些jQuery可以做到这一点:http://api.jquery.com/attribute-equals-selector/
qco9c6ql3#
如果你想多次隐藏一个复选框/单选框,那就做一个自定义的复选框/单选框。如果您希望能够聚焦在输入的标签上,请使用不透明度:0;位置:绝对;width:0;这使得输入不可见而不占用空间。如果使用显示:无;或可见性:隐藏;它将有一个类似的效果,但目前最常用的浏览器(MSIE11,边缘,Chrome 60.0.3112.101,Firefox 55)将不允许通过使用键盘聚焦元素,这使得它更难访问。
.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; }
<p> <input type="button" value="Click this button and press tab to change focus"> </p> <div> <input class="opacity" type="checkbox" id="checkbox1"> <label for="checkbox1">Press space to (un)check</label> </div> <div> <input class="opacity" type="checkbox" id="checkbox2"> <label for="checkbox2">Press space to (un)check</label> </div> <div> <input class="visibility" type="checkbox" id="checkbox3"> <label for="checkbox3">Press space to (un)check</label> </div> <div> <input class="visibility" type="checkbox" id="checkbox4"> <label for="checkbox4">Press space to (un)check</label> </div> <div> <input class="nodisplay" type="checkbox" id="checkbox5"> <label for="checkbox5">Press space to (un)check</label> </div> <div> <input class="nodisplay" type="checkbox" id="checkbox6"> <label for="checkbox6">Press space to (un)check</label> </div>
演示:https://jsfiddle.net/Lmt4zrvn/
uujelgoq4#
尝试visibility:hidden;这将工作。这是**WORKING DEMO**
visibility:hidden;
HTML:
<input class="checked" type="radio" checked />
中央社:
input.checked[type="radio"]{visibility:hidden;}
我希望这是你要找的。
kx5bkwkv5#
尝试使用:checked选择器:
:checked
input[type="radio"]:checked { display: none; }
演示:http://jsfiddle.net/RkzG5/
6rqinv9w6#
如果您已使用{显示:无;},而你仍然看到一个空格(像3 px左右),那么很可能你的html中的元素之间有空格或换行符,这有时会导致渲染器在这些元素之间显示一些像素。这确实是个问题,如果不了解这些信息,很难将其确定为问题,但一旦您了解了这些信息,就有两个简单的解决方案:1.或者,删除html中标签之间的白色(不幸的是,这会使html更混乱,所以第二种选择可能更好)。1.或者,在css中,将父容器中的font-size设置为0px.ex:#parent{font-size:0px;},然后为具有#parent *{font-size:initial;}的父对象的所有子对象再次初始化它。
#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; }
<div id="parent"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label class="tab-label" for="tab-1">Tab One</label> <input type="radio" id="tab-2" name="tab-group-1"> <label class="tab-label" for="tab-2">Tab Two</label> <input type="radio" id="tab-3" name="tab-group-1"> <label class="tab-label" for="tab-3">Tab Three</label> </div>
izj3ouym7#
(我用谷歌翻译)我喜欢用“不透明度:0'.当您使用“显示:无“或”活力:隐藏,您输入无线电不工作。试试看:PS:我用“位置:absolute“表示在div中不占空格
input[type="radio"] { opacity: 0; position: absolute; };
r6hnlfcb8#
除了其他回答中提到的问题(特别是可访问性问题),display: none的警告是,当无线电输入为required而用户没有选中它时,它也会影响浏览器显示的警告。另一方面,对于opacity: 0和visibility: hidden,需要注意的是单选按钮仍然会占用一些空间(并且AFAICS width: 0px不起作用),这可能是个问题(例如,用于对齐,或者如果单选按钮位于<li>标记内,并且您希望<li>背景色在:hover上更改,在这种情况下标签必须覆盖<li>)。修复方法是简单地将单选按钮的position设置为fixed:
display: none
required
opacity: 0
visibility: hidden
width: 0px
<li>
:hover
position
fixed
input[type=radio] { opacity: 10; position: fixed; } input[type=radio]+label { background-color: #eee; padding: 1em; }
<input type="radio" id="radio1"> <label for="radio1">radio1</label> <input type="radio" id="radio2"> <label for="radio2">radio2</label>
如代码片段所示(使用opacity: 10而不是0只是为了了解我们所讨论的内容),使用position: fixed时,单选按钮不再影响标签。
opacity: 10
position: fixed
t9aqgxwy9#
对我来说,它是appearance: none;,因为我想用before(轮廓)和after(标记)元素来设计收音机,而不能隐藏整个元素,这样键盘支持和原生功能仍然可以工作。
appearance: none;
9条答案
按热度按时间mitkmikd1#
只是一个小提示:
如果你仍然想使用浏览器对收音机和复选框的所有原生支持,比如用↑和↓键在它们之间移动,那么将css设置为:
这将保留所有功能,但保持输入隐藏,不会占用任何布局空间。
我花了3个小时才弄明白,但它确实有效!
fgw7neuy2#
对Nathan Lee答复的补充
是指定选中单选按钮的选项
是一个选项,用于指定选中的单选按钮,其值等于"text"(在示例中为"none")
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
如果这个值是未知的,一些jQuery可以做到这一点:http://api.jquery.com/attribute-equals-selector/
qco9c6ql3#
如果你想多次隐藏一个复选框/单选框,那就做一个自定义的复选框/单选框。
如果您希望能够聚焦在输入的标签上,请使用不透明度:0;位置:绝对;width:0;这使得输入不可见而不占用空间。
如果使用显示:无;或可见性:隐藏;它将有一个类似的效果,但目前最常用的浏览器(MSIE11,边缘,Chrome 60.0.3112.101,Firefox 55)将不允许通过使用键盘聚焦元素,这使得它更难访问。
演示:https://jsfiddle.net/Lmt4zrvn/
uujelgoq4#
尝试
visibility:hidden;
这将工作。这是**WORKING DEMO**
HTML:
中央社:
我希望这是你要找的。
kx5bkwkv5#
尝试使用
:checked
选择器:演示:http://jsfiddle.net/RkzG5/
6rqinv9w6#
如果您已使用{显示:无;},而你仍然看到一个空格(像3 px左右),那么很可能你的html中的元素之间有空格或换行符,这有时会导致渲染器在这些元素之间显示一些像素。
这确实是个问题,如果不了解这些信息,很难将其确定为问题,但一旦您了解了这些信息,就有两个简单的解决方案:
1.或者,删除html中标签之间的白色(不幸的是,这会使html更混乱,所以第二种选择可能更好)。
1.或者,在css中,将父容器中的font-size设置为0px.ex:
#parent{font-size:0px;}
,然后为具有#parent *{font-size:initial;}
的父对象的所有子对象再次初始化它。izj3ouym7#
(我用谷歌翻译)
我喜欢用“不透明度:0'.
当您使用“显示:无“或”活力:隐藏,您输入无线电不工作。
试试看:
PS:我用“位置:absolute“表示在div中不占空格
r6hnlfcb8#
除了其他回答中提到的问题(特别是可访问性问题),
display: none
的警告是,当无线电输入为required
而用户没有选中它时,它也会影响浏览器显示的警告。另一方面,对于
opacity: 0
和visibility: hidden
,需要注意的是单选按钮仍然会占用一些空间(并且AFAICSwidth: 0px
不起作用),这可能是个问题(例如,用于对齐,或者如果单选按钮位于<li>
标记内,并且您希望<li>
背景色在:hover
上更改,在这种情况下标签必须覆盖<li>
)。修复方法是简单地将单选按钮的
position
设置为fixed
:如代码片段所示(使用
opacity: 10
而不是0只是为了了解我们所讨论的内容),使用position: fixed
时,单选按钮不再影响标签。t9aqgxwy9#
对我来说,它是
appearance: none;
,因为我想用before(轮廓)和after(标记)元素来设计收音机,而不能隐藏整个元素,这样键盘支持和原生功能仍然可以工作。