Casillas de verificación en páginas web: ¿cómo agrandarlas?


113

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 usa una fuente más grande. ¿Cuál es la mejor forma, independiente del navegador, de mostrar casillas de verificación más grandes?

Respuestas:


143

En caso de que esto pueda ayudar a alguien, aquí tiene CSS simple 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;
}
<input type="checkbox" />


@GabrielW Eso es correcto. Solo use el equivalente para los demás
taylorcressy

@taylorcressy Excepto IE (también IE 11) caniuse.com/#search=Appearance - pero funcionó bien para otros navegadores. ¡Gracias!
CodeBrauer

16
Sería bueno si también hubiera un tic en el interior :)
Robert King

@Paul: Gracias por compartir. Me preguntaba cómo lidias con la aparición de la marca de verificación. Con el fondo configurado en un color, la marca de verificación blanca en el cuadro ya no es visible. hay una solucion facil? Intenté agregar una entidad html para la verificación en a: antes, pero me pregunto si hay una alternativa
PBandJen

1
Usé

47

En realidad, hay una forma de hacerlos más grandes, casillas de verificación como cualquier otra cosa (incluso un iframe como un botón de Facebook).

Envuélvalos en un elemento "ampliado":

.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;
}
<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

Puede parecer un poco "reescalado", pero funciona.

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


1
Tenga en cuenta que en Firefox (a partir de la versión 36), esto resultará en una apariencia muy borrosa. Sin embargo, se escala bien en Chrome. Demostración: jsfiddle.net/tzp858j3
Kat

¿No hay mejor solución que NO parezca escalada?
basZero

3
No se puede zoom: 2y transform: scale(2)debe aplicarse directamente a la casilla de verificación? ¿Por qué necesita una envoltura?
Atav32

¡Gracias! Parece que su código tiene en cuenta más navegadores de los que podría probar, pero funciona en todo lo que he probado. ¡Especialmente agradable en mi teléfono I, donde las casillas de verificación casi se convierten en puntos! Por cierto, puede poner una escala fraccional más pequeña (como 1,5) en los lugares donde este snipet pone "2", y para una casilla de verificación de tamaño mediano.
Randy

26

Prueba este CSS

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

2
No es totalmente entre navegadores (es mejor establecer una clase en HTML y usar el selector de clases en CSS), pero esta podría ser una solución mejor que la mía. +1
Harmen

1
Estaba usando ancho y alto como ejemplo. Probablemente una combinación de Harmen y mi solución sea el camino a seguir, ya que es posible que necesite más estilo del que CSS puede proporcionar razonablemente.
Collin White

6
Esto solo funcionará en algunos navegadores, y no en muchos navegadores modernos.
RJ Owen

1
Esto funciona en ipad safari, donde las casillas de verificación a menudo deben ser más grandes para que sea más fácil para los usuarios hacer clic.
user3032973

3
La principal limitación es que no funciona en absoluto en Firefox (a partir de Firefox 36) y, de hecho, se verá bastante poco natural (la casilla de verificación tiene un tamaño normal pero el relleno alrededor llena el área de 100 x 100 px.
Kat

5

Intenté cambiar el paddingy marginy así como el widthy height, y finalmente descubrí que si solo aumentas la escala, funcionará:

input[type=checkbox] {
    transform: scale(1.5);
}

1

Aquí hay un truco que funciona en los navegadores más recientes (IE9 +) como una solución única de CSS que se puede mejorar con javascript para admitir IE8 y versiones anteriores.

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

Diseñe el estilo labelcon el aspecto que desea que tenga la casilla de verificación

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

Para javascript, podrá agregar clases a la etiqueta para mostrar el estado. Además, sería aconsejable utilizar la siguiente función:

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

EDITAR para modificar #checkboxIDestilos


consulte stackoverflow.com/a/3772914/190135 para obtener un enlace al código fuente completo para esta técnica
AlexChaffee

1

Estoy escribiendo una aplicación phonegap y las casillas de verificación varían en tamaño, apariencia, etc. Así que hice mi propia casilla de verificación simple:

Primero el código HTML:

<span role="checkbox"/>

Entonces 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 de la casilla de verificación, usé JQuery:

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

Pero se puede hacer fácilmente sin él ...

¡Espero que pueda ayudar!


1

Pura y moderna decisión de CSS 2020 , sin escalas borrosas o transformaciones no útiles ¡Y con tic! =)

Funciona bien en navegadores basados ​​en Firefox y Chromium.

Por lo tanto, puede controlar sus casillas de verificación de forma puramente ADAPTATIVA , simplemente configurando el bloque principal font-heighty ¡crecerá con el texto!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}
<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.