formularios - ¿Puedes diseñar un botón de opción html para que parezca una casilla de verificación?

radio button html ejemplo

Question

Tengo un formulario html que un usuario completará e imprimirá. Una vez impresos, estos formularios se enviarán por fax o por correo a una agencia gubernamental, y deben buscarse lo suficientemente cerca como el formulario original publicado por dicha agencia, que un burócrata del gobierno no detecta que se trata de una reproducción. Los datos ingresados ​​en el formulario no se guardan en ningún lado ni se envían a un servidor web. Todo lo que importa es que nuestros usuarios pueden encontrar fácilmente estos formularios en nuestro sitio de intranet y escribir en el formulario para imprimir con su teclado normal.

En la pantalla, quiero dejar el botón de radio tal como está, para aplicar y comunicar el uso del botón de opción (elija solo una opción). Sin embargo, cuando se imprime, lo necesito para imprimir con el estilo de casilla de verificación cuadrado en lugar del estilo de botón redondo de radio. Sé cómo usar un selector de medios para establecer estilos solo para imprimir, así que ese no es el problema. Es solo que no sé si puedo darle estilo al botón de radio como quiero.

Si no puedo hacerlo funcionar, tendré que crear una casilla de verificación para sombrear cada botón de radio, usar javascript para mantener sincronizadas las casillas de verificación y los botones de radio, y css para mostrar el que me importa en el medio adecuado. Obviamente, si puedo diseñarlos, ahorrará mucho trabajo.

Answer 1

Ajusté la respuesta de user2314737 para usar la fuente impresionante para el ícono. Para aquellos que no están familiarizados con fa, un beneficio significativo sobre img es la representación basada en vectores inherente a las fuentes. Es decir, no hay jaggies de imagen en ningún nivel de zoom.

jsFiddle

Resultado

div.checkRadioContainer > label > input {
 visibility: hidden;
}

div.checkRadioContainer {
 max-width: 10em;
}
div.checkRadioContainer > label {
 display: block;
 border: 2px solid grey;
 margin-bottom: -2px;
 cursor: pointer;
}

div.checkRadioContainer > label:hover {
 background-color: AliceBlue;
}

div.checkRadioContainer > label > span {
 display: inline-block;
 vertical-align: top;
 line-height: 2em;
}

div.checkRadioContainer > label > input + i {
 visibility: hidden;
 color: green;
 margin-left: -0.5em;
 margin-right: 0.2em;
}

div.checkRadioContainer > label > input:checked + i {
 visibility: visible;
}

<div class="checkRadioContainer">
 <label>
  <input type="radio" name="radioGroup" />
  <i class="fa fa-check fa-2x"></i>
  <span>Item 1</span>
 </label>
 <label>
  <input type="radio" name="radioGroup" />
  <i class="fa fa-check fa-2x"></i>
  <span>Item 2</span>
 </label>
 <label>
  <input type="radio" name="radioGroup" />
  <i class="fa fa-check fa-2x"></i>
  <span>Item 3</span>
 </label>
</div>

Answer 2

En CSS3:

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

En realidad:

<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>

@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}

y necesitará Javascript para mantener <img> y radios sincronizados (e idealmente insertarlos allí en primer lugar).

He usado <img> , porque los navegadores generalmente están configurados para no imprimir background-image . Es mejor usar imágenes que otro control, porque la imagen no es interactiva y es menos probable que cause problemas.

Answer 3

Esta es mi solución usando solo CSS (Jsfiddle: http://jsfiddle.net/xykPT/ ).

div.options > label > input {
 visibility: hidden;
}

div.options > label {
 display: block;
 margin: 0 0 0 -10px;
 padding: 0 0 20px 0;  
 height: 20px;
 width: 150px;
}

div.options > label > img {
 display: inline-block;
 padding: 0px;
 height:30px;
 width:30px;
 background: none;
}

div.options > label > input:checked +img {  
 background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
 background-repeat: no-repeat;
 background-position:center center;
 background-size:30px 30px;
}

<div class="options">
 <label title="item1">
  <input type="radio" name="foo" value="0" /> 
  Item 1
  <img />
 </label>
 <label title="item2">
  <input type="radio" name="foo" value="1" />
  Item 2
  <img />
 </label>   
 <label title="item3">
  <input type="radio" name="foo" value="2" />
  Item 3
  <img />
 </label>
</div>

Answer 4

Idea muy simple usando una tabla y sin Javascript. ¿Estoy siendo demasiado simplista?

<style type="text/css" media="screen">
#ageBox {display: none;}
</style>

<style type="text/css" media="print">
#ageButton {display: none;}
</style>

<tr><td>Age:</td>

<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34

<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34

</td></tr>

Answer 5

No creo que puedas hacer que un control se parezca a algo más que un control con CSS.

Su mejor opción es hacer que un botón IMPRIMIR vaya a una nueva página con un gráfico en lugar del botón de selección seleccionado, luego haga una ventana.impresión () desde allí.

Answer 6

Sí, CSS puede hacer esto:

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + *:before {
  content: "";
  display: inline-block;
  margin: 0 0.4em;
  /* Make some horizontal space. */
  width: .6em;
  height: .6em;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  ;
  /* No inner circle. */
  background-color: #ddd;
  /* Inner color. */
}
input[type=checkbox]:checked + *:before {
  box-shadow: 0px 0px 0px .5px #888
  /* An outer circle. */
  , inset 0px 0px 0px .14em #ddd;
  /* An inner circle with above inner color.*/
  background-color: #444;
  /* The dot color */
}

<div>
  <input id="check1" type="checkbox" name="check" value="check1" checked>
  <label for="check1">Fake Checkbox1</label>
</div>
<div>
  <input id="check2" type="checkbox" name="check" value="check2">
  <label for="check2">Fake Checkbox2</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio1" checked>
  <label for="check2">Real Checkbox1</label>
</div>
<div>
  <input id="check2" type="radio" name="check" value="radio2">
  <label for="check2">Real Checkbox2</label>
</div>

Answer 7

Tres años después de que se publique esta pregunta y esto está casi al alcance. De hecho, es completamente alcanzable en Firefox 1+, Chrome 1+, Safari 3+ y Opera 15+ usando el CSS3 propiedad de appearance .

El resultado son elementos de radio que parecen casillas de verificación:

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

jsfiddle: http://jsfiddle.net/mq8Zq/

Nota: esto finalmente se eliminó de la especificación CSS3 debido a la falta de soporte y conformidad de los proveedores. Recomiendo que no se implemente a menos que solo necesite soportar navegadores basados ​​en Webkit o Gecko.

Answer 8

propiedad apariencia no funciona en todos los navegadores. Puedes hacer lo siguiente:

input[type="radio"]{
  display: none;
}
label:before{
  content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
  content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}

 
  <input type="radio" name="gender" id="test1" value="male">
  <label for="test1"> check 1</label>
  <input type="radio" name="gender" value="female" id="test2">
  <label for="test2"> check 2</label>
  <input type="radio" name="gender" value="other" id="test3">
  <label for="test3"> check 3</label>  

Funciona IE 8+ y otros navegadores