Vorrei sapere se è possibile nascondere il pulsante di scelta verificato con css utilizzando:Nascondi pulsante di controllo con i CSS
{ display:none; }
non so come affrontare questo elemento. Il pulsante di opzione selezionato mostra sempre "nessuno" che non significa nulla per l'utente e desidero nasconderlo. È possibile? Grazie per qualsiasi puntatore.
Prova visibility:hidden; Funzionerà.
Ecco la WORKING DEMO
Il codice HTML:
<input class="checked" type="radio" checked />
Il CSS:
input.checked[type="radio"]{visibility:hidden;}
Spero che questo è quello che stai cercando.
addizionale Nathan Lee risposta
input[type="radio"]:checked{
visibility:hidden;
}
è un'opzione per specificare un pulsante controllato
input[type="radio"][value="text"]:checked{
visibility:hidden;
}
è un'opzione per specificare un pulsante di scelta controllato con un valore che è uguale a 'text' ('none' nel tuo esempio) più
informazioni: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
se il valore non è sapere, un po 'di jQuery può fare il trucco: http://api.jquery.com/attribute-equals-selector/
Grazie, questo è esattamente ciò di cui avevo bisogno, tuttavia, ho notato un ulteriore problema, che non ho preso in considerazione. Si prega di dare un'occhiata a questa pagina (http://marsden.webresponsive.co.uk/index.php/digi-di-162ss.html). Voglio solo nascondere il pulsante selezionato dove il testo è "Nessuno", altrimenti quando controllo le altre opzioni gli altri pulsanti radio sono nascosti e non lo voglio. Come posso fare questo? – user1977156
@ user1977156 Vuoi dire se il valore è nessuno? => 'input [type =" radio "] [value =" text "]: checked' Non sono sicuro dove vedere un pulsante di opzione nella tua pagina, non sembra esserci uno nel codice sorgente .. – lijn
Scusa forse non era chiaro. Voglio dire che il primo ingresso radio di default è sempre selezionato e il testo è sempre uguale a "Nessuno". Voglio nascondere solo quell'ingresso radio il cui testo è uguale a "Nessuno". – user1977156
Prova utilizzando :checked selettore:
input[type="radio"]:checked {
display: none;
}
Solo un piccolo suggerimento, se si vuole ancora utilizzare tutto il supporto nativo del browser per radio e caselle di controllo, come lo spostamento tra di loro con chiavi ↑ e ↓, impostare il css su position:fixed;opacity:0, questo manterrà tutte le funzionalità ma manterrà l'input nascosto e non occuperà alcun spazio di layout. Ho passato le ultime 3 ore a capirlo, ma funziona!
Questa è la risposta migliore, poiché non influisce sugli utenti di accessibilità o sulla navigazione da tastiera. – Arjun
Se hai usato {display: none;} e vedi ancora uno spazio (come 3px o giù di lì), allora è probabile che tu abbia spazi o new-line tra gli elementi nel tuo html che a volte possono causare renderer per visualizzare alcuni pixel tra questi elementi.
questo è davvero problematico e può essere molto difficile da identificare come il problema senza questa conoscenza, ma una volta che si sa, è avere due semplici soluzioni:
entrambi i casi, rimuovere tale spazio bianco tra i tag in il tuo html. (Sfortunatamente, ciò rende la tua messaggistica più complessa, quindi la seconda opzione potrebbe essere migliore.)
Oppure, nel proprio css, impostare la dimensione del carattere nel contenitore padre su 0px. ex: #parent{font-size:0px;} e quindi inizializzarlo di nuovo per tutti i figli del genitore con #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>Se si desidera nascondere una casella di controllo/radio molte volte è fare un checkbox/radio. Se vuoi essere in grado di mettere a fuoco sull'etichetta per l'input usa visibilità: nascosta; position: absolute; larghezza: 0; che rende l'input invisibile senza occupare spazio. Se si usa display: nessuno; o visibilità: nascosta; avrà lo stesso effetto ma gli attuali browser più usati (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) non permetteranno di focalizzare l'elemento usando la tastiera che lo rende meno accessibile.
.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>
ciò che è sbagliato con l'input [type = "radio"]: checked {display: none;} ?? Dovrebbe nasconderlo in questo modo. Non so perché vorresti nasconderlo anche se – Danield