Botones de radio HTML: ocultar viñetas

Question

Quiero que un componente de formulario particular actúe como botones de opción (solo se puede seleccionar una opción a la vez). No quiero que las viñetas de la radio se muestren, sin embargo, opto por métodos de presentación alternativos, como alta luz seleccionada, o algún otro método. Esto permitirá una degradación elegante: si el navegador del usuario no admite Javascript, simplemente se degradará a botones de opción básicos. Deseo ocultar los botones de la viñeta a través de Javascript o CSS. Alguien sabe como? Gracias.

Answer 1

Si entiendo esto correctamente, usted quiere botones de radio, pero no desea que los mismos botones de Aparecer. Tenga en cuenta que solo quitar los botones NO proporcionará la experiencia del usuario que está buscando. Debe tener alguna forma de comentarios de los usuarios.

tiene dos opciones:

1) Programa de esto usando Javascript/jQuery. Con esto en mente, le sugiero que use botones de radio como marcador de posición inicial, y luego use javascript (idealmente a través de un plugin jquery) que redibujará la página y reemplazará los botones con divisiones clicables y un valor de campo oculto que cambia dinámicamente.

2) Utilice el CSS meta class of :checked que, lamentablemente, no parece tener soporte de navegador cruzado.

Answer 2

puede hacerlo agregando este estilo = "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'; 
    } 

} 

Alternativamente, si el navegador es compatible (querySelectorAll in document) ...

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

Answer 5

No creo que puedas ocultarlo con CSS. Tendría que ocultar los botones de radio y luego reemplazar la funcionalidad con JS. tal vez una lista seleccionable de LI funcione para usted.

Desde la interfaz de usuario jQuery seleccionable: 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

tengo una solución simple de trabajo en el que tengo una etiqueta que rodea mis botones de radio con una imagen que representa la cosa siendo seleccionado:

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

He aplicado los siguientes estilos:

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; 
} 

Esencialmente cada label se convierte en una caja de tamaño regular que se llena por completo con img. La radio en sí está oculta usando opacity:0. El usuario puede decir qué se selecciona, ya que el img junto a la radio marcada será opaco mientras que los otros son semitransparentes. Podrías hacer varios otros tipos de efectos con bastante facilidad.

Lo que me gusta es que el formulario sigue siendo simple de procesar, es es solo un grupo de botones de opción.

Utilicé opacidad para los botones de opción en lugar de display:none o visibility:hidden, ya que aún están en el tabindex y el formulario permanece accesible mediante teclado.

Answer 7

Sólo el bit de ocultar los botones de radio (sin perder la accesibilidad, por supuesto) se puede hacer con el siguiente CSS:

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

Usando opacity: 0; no es lo ideal, ya que el botón está todavía allí, teniendo espacio arriba en la página. Posicionarlo fuera de la vista es el camino a seguir.

Answer 8

basta con insertar: style="display:none;" dentro de cada etiqueta "<input type='radio'…>".

Esto hace que las viñetas sean invisibles, pero deja las etiquetas visibles.