Casillas de verificación en páginas web: ¿cómo hacerlas más grandes?

Question

Las casillas de verificación estándar representadas en la mayoría de los navegadores son bastante pequeñas y no aumentan de tamaño incluso cuando se utiliza una fuente más grande. ¿Cuál es la mejor manera, independiente del navegador, de mostrar casillas de verificación más grandes?

Answer 1

En caso de que esto pueda ayudar a cualquiera, aquí está el simple CSS como punto de partida. Lo convierte en un cuadrado redondeado básico lo suficientemente grande para los pulgares con un color de fondo alternado.

input[type='checkbox'] { 
    -webkit-appearance:none; 
    width:30px; 
    height:30px; 
    background:white; 
    border-radius:5px; 
    border:2px solid #555; 
} 
input[type='checkbox']:checked { 
    background: #abd; 
} 

Answer 2

probar este CSS

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

Answer 3

Cambiar el tamaño de la casilla de verificación usando CSS produce resultados inconsistentes a través de navegadores y sistemas operativos. Realmente no puedes hacerlo más grande.

Puede cambiar el estilo de ellos, sin embargo: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 4

Aquí hay un truco que funciona en la mayoría de los navegadores recientes (IE9 +) como CSS única solución que puede ser mejorada con javascript para apoyar IE8 y por debajo.

<div> 
    <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" /> 
    <label for="checkboxID"> </label> 
</div> 

Estilo del label con lo que quiere la casilla de verificación para que parezca

#checkboxID 
{ 
    position: absolute fixed; 
    margin-right: 2000px; 
    right: 100%; 
} 
#checkboxID + label 
{ 
    /* unchecked state */ 
} 
#checkboxID:checked + label 
{ 
    /* checked state */ 
}

JavaScript, usted será capaz de añadir clases a la etiqueta para mostrar el estado. Asimismo, sería aconsejable utilizar la siguiente función:

$('label[for]').live('click', function(e){ 
    $('#' + $(this).attr('for')).click(); 
    return false; 
}); 

EDITAR para modificar #checkboxID estilos

Answer 5

estoy aplicación PhoneGap writtinga y casillas de verificación varían en tamaño, aspecto, etc. Así que hizo que mi propia simple casilla:

En primer lugar el código HTML:

<span role="checkbox"/> 

A continuación, el CSS:

[role=checkbox]{ 
    background-image: url(../img/checkbox_nc.png); 
    height: 15px; 
    width: 15px; 
    display: inline-block; 
    margin: 0 5px 0 5px; 
    cursor: pointer; 
} 

.checked[role=checkbox]{ 
    background-image: url(../img/checkbox_c.png); 
} 

para alternar el estado casilla de verificación, he usado jQuery:

CLICKEVENT='touchend'; 
function createCheckboxes() 
{ 
    $('[role=checkbox]').bind(CLICKEVENT,function() 
    { 
     $(this).toggleClass('checked'); 
    }); 
} 

pero puede hacerse fácilmente sin ella ...

esperan que los pueda ayudar!

Answer 6

En realidad no es una manera de hacerlos más grandes, casillas de verificación al igual que cualquier otra cosa (incluso un iframe como un botón de Facebook).

envolverlos en un elemento de "zoom":

.double { 
    zoom:2; 
    transform:scale(2); 
    -ms-transform:scale(2); 
    -webkit-transform:scale(2); 
    -o-transform:scale(2); 
    -moz-transform:scale(2); 
    transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    -webkit-transform-origin:0 0; 
    -o-transform-origin:0 0; 
    -moz-transform-origin:0 0; 
    -webkit-transform-origin:0 0; 
} 

<div class="double"> 
    <input type="checkbox" name="hello" value="1"> 
</div> 

Puede parecer un poco "reescalado" pero funciona.

Por supuesto puede hacer que div flote: a la izquierda y coloque su etiqueta al lado, flote: a la izquierda también.