Pulsanti radio HTML: nascondi punti elenco

Question

Desidero che un particolare componente del modulo funga da pulsanti di opzione (è possibile selezionare solo un'opzione alla volta). Non voglio mostrare i proiettili radio, tuttavia, optando per metodi di presentazione alternativi come l'alta luce selezionata o qualche altro metodo. Ciò consentirà un degrado aggraziato: se il browser dell'utente non supporta Javascript, verrà semplicemente degradato ai pulsanti di opzione di base. Desidero nascondere i pulsanti del proiettile tramite Javascript o CSS. Qualcuno sa come? Grazie.

Answer 1

Se ho capito bene, si desidera pulsanti di scelta, ma non si desidera che i pulsanti stessi per apparire. Tieni presente che la semplice rimozione dei pulsanti NON fornirà l'esperienza utente che stai cercando. Devi avere qualche forma di feedback da parte degli utenti.

si hanno due opzioni:

1) Programma di questo utilizzando JavaScript/jQuery. Con questo in mente ti suggerirei di utilizzare i pulsanti di opzione come segnaposto di partenza e quindi utilizzare javascript (idealmente tramite un plug-in jquery) che ridisegna la pagina e sostituisce i pulsanti con div cliccabili e un valore di campo nascosto che cambia dinamicamente.

2) Utilizzare il CSS meta class of :checked che, sfortunatamente, non sembra avere il supporto cross browser.

Answer 2

puoi farlo aggiungendo questo style = "list-style: none;"

Answer 3

$('#js input[type=radio]').hide(); 

Answer 4

var inputs = document.getElementById('my-form').getElementsByTagName('input'); 

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) { 

    var input = inputs[i]; 

    if (input.getAttribute('type') == 'radio') { 
     input.style.display = 'none'; 
    } 

} 

In alternativa, se il tuo browser lo supporta (querySelectorAll in document) ...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none'; 

Answer 5

Non penso di poterlo nascondere con i CSS. Dovresti nascondere i pulsanti radio e quindi sostituire la funzionalità con JS. forse una lista selezionabile di LI funzionerebbe per te.

Dal jQuery UI selezionabili: http://jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'> 
<input type='radio' value='2' name='rad' class='radio'> 
<input type='radio' value='3' name='rad' class='radio'> 

<ol id="selectable" style='display:none'> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
</ol> 

$(function() { 
    $('.radio').hide(); 
    $("#selectable").show().selectable({ 
     selected: function(event, ui) {//figure out which was selected and mark the hidden radio button} 
    }); 
}); 

Answer 6

Ho una soluzione semplice di lavoro in cui ho un'etichetta che circonda i miei pulsanti di opzione con un'immagine che rappresenta la cosa viene selezionato:

<label> 
    <input type="radio" name="foo"> 
    <img src="..."> 
</label> 

ho poi applicato i seguenti stili:

label { 
    float: left; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    cursor: pointer; 
} 

label input[type=radio] { 
    opacity: 0; 
} 

label img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.5; 
} 

:checked + img { 
    opacity: 1; 
} 

In sostanza, ogni label diventa una casella di dimensioni regolari che viene riempita completamente da un img. La radio stessa è nascosta usando opacity:0. L'utente può dire cosa è selezionato come il img accanto alla radio selezionata sarà opaco mentre gli altri sono semi-trasparenti. Potresti fare vari altri tipi di effetti abbastanza facilmente.

La cosa che mi piace è che il modulo rimane semplice da elaborare, è è solo un gruppo di pulsanti di opzione.

Ho usato l'opacità per i pulsanti di opzione anziché per display:none o visibility:hidden, poiché sono ancora nel tabindex e il modulo rimane accessibile dalla tastiera.

Answer 7

Proprio il bit di nascondere i pulsanti radio (senza perdere l'accessibilità, ovviamente) può essere fatto con il seguente CSS:

input[type="radio"] { 
    left: -999em; 
    position: absolute; 
} 

Utilizzando opacity: 0; non è l'ideale, come il pulsante è ancora lì, prendendo lo spazio nella pagina. Posizionarlo fuori dalla vista è la strada da percorrere.

Answer 8

Inserire semplicemente: style="display:none;" all'interno di ogni tag "<input type='radio'…>".

Questo rende invisibili i proiettili, ma lascia le etichette mostrate.