隱藏檢查單選按鈕用CSS

Question

我想知道是否有可能通過使用隱藏的CSS選中的單選按鈕：

{ display:none; } 

我不知道如何解決這個元素。選中的單選按鈕總是顯示「無」，這對用戶來說沒有任何意義，我希望隱藏它。 這可能嗎？ 感謝任何指針。

Answer 1

嘗試visibility:hidden;這將工作。

這裏是WORKING DEMO

的HTML：

<input class="checked" type="radio" checked /> 

的CSS：

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

我希望這是你在找什麼。

Answer 2

附加到彌敦道李答案

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

是指定一個檢查單選按鈕

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

是帶有等於「文」（值指定檢查單選按鈕的選項一個選項'none'）

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

如果值是不知道，一些jQuery的可以做的伎倆：http://api.jquery.com/attribute-equals-selector/

Answer 3

嘗試使用:checked選擇：

input[type="radio"]:checked { 
    display: none; 
} 

演示：http://jsfiddle.net/RkzG5/

Answer 4

只是一個小技巧，如果你仍然想使用所有瀏覽器對無線電和複選框的本地支持，如在它們之間移動↑和↓鍵，將css設置爲position:fixed;opacity:0，這將保持所有功能，但保持輸入隱藏，並且不會佔用任何佈局空間。我花了最近3個小時弄清楚了這一點，但它確實有效！

Answer 5

如果你已經使用{display：none;}並且你仍然看到一個空格（比如3px左右），那麼你的html中的元素之間可能會有空格或換行符，有時會導致渲染器在這些元素之間顯示一些像素。

這確實是有問題的，可以是非常難以識別因爲沒有這方面的知識的問題，但一旦你知道，你有兩個簡單的解決方案：

1. 要麼，除去在標籤之間的空白你的HTML。 （不幸的是，這使得你的html更加麻煩，所以第二種選擇可能會更好。）

2. 或者，在您的CSS中，將父容器中的font-size設置爲0px。 ex：#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>

Answer 6

如果你想隱藏複選框/收音機很多時候它是讓一個自定義的複選框/收音機。 如果您希望能夠關注輸入使用可見性的標籤：hidden;位置：絕對的;寬度：0;這使得輸入在不佔用空間的情況下不可見。 如果使用display：none;或可見性：隱藏;它會有相同的效果，但目前最常用的瀏覽器（MSIE11，Edge，Chrome 60.0.3112.101，Firefox 55）不允許通過使用鍵盤來關注元素，使其不易訪問。

.opacity { 
 
\t position: absolute; 
 
\t opacity: 0; 
 
\t width: 0; \t \t /* for internet explorer */ 
 
} 
 

 
.visibility { 
 
\t visibility: hidden; 
 
} 
 

 
.nodisplay { 
 
\t display: none; 
 
} 
 

 
input[type=checkbox]+label { 
 
\t font-weight: normal; 
 
} 
 
input[type=checkbox]:checked+label { 
 
\t font-weight: bold; 
 
} 
 
input[type=checkbox]:focus+label { 
 
\t border: 1px dotted #000; 
 
}

<p> 
 
\t <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>