¿Cómo puedo hacer que una casilla de verificación sea más grande?

Question

Mi página web utiliza casillas de verificación. Ellos parecen muy pequeños. Traté de agrandarlos usando "font-size: 1.5em". Esto no pareció cambiarlos en absoluto.

¿Hay una manera simple que puedo hacer una casilla más grande?

Gracias,

Answer 1

No se puede cambiar la apariencia de las casillas de verificación en la mayoría de los navegadores. Compruebe esto: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

Intente agregar un elemento y hacer que cambie el estado de la casilla de verificación. Marque esto para un ejemplo: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 2

Puede hacerlo utilizando imágenes.

CSS

#mycheckbox 
{ 
    display: none; 
} 

#mycheckbox + label 
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/photo_of_big_unchecked_box.png'); 
} 

#mycheckbox:checked + label 
{ 
    background: url('/path/to/photo_of_big_checked_box.png'); 
} 

HTML

<input type="checkbox" name="mycheckbox" id="mycheckbox"><label for="mycheckbox"></label> 

Esa es una manera es posible lograr la meta.

EDITAR

Here es el vínculo de trabajo para IE

Answer 3

Lamentablemente, CSS no está definido con un poco <input> hacer posibilidades de modificarlos limitado. Varios navegadores hacen las cosas de manera diferente. width y height prácticamente funcionan en casillas de verificación solo en Internet Explorer.

Varias soluciones aparecieron, por ejemplo emulating checkboxes using JS, so those can be styled.

Answer 4

AS no puede cambiar la apariencia de casillas de verificación cruzan navegador compatible, sugiero, usar algo como Ryan Fait describes in his blog. Esta técnica le permite usar gráficos personalizados para sus casillas de verificación.

---

Answer 5

Tal vez parezca un poco demasiado obvio, pero funciona:

input[type='checkbox'] { 
    width: 30px; 
    height: 30px;   
} 

Funciona como se podría esperar en IE y Chrome, y aunque no se ve como que es más grande en Firefox usted todavía consigue una mayor hit box:

Answer 6

usted puede utilizar la etiqueta CSS zoom.

h6 { 
 
    zoom: 5; 
 
}

<h6><input type="checkbox"></h6>