style - link css to html

Tamaño de casilla de verificación en HTML/CSS

Question

¿Es posible establecer el tamaño de una casilla de verificación utilizando CSS o HTML?

width y el size funcionan con IE6 + pero no con Firefox, donde la casilla de verificación permanece 16x16 incluso si configuro un tamaño más pequeño.

Answer 1

Acabo de salir con esto:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

Por supuesto, gracias a esto, puede cambiar el valor del content según sus necesidades y usar una imagen si lo desea o usar otra fuente ...

El principal interés aquí es que:

1. El tamaño de la casilla de verificación se mantiene proporcional al tamaño del texto.

2. Puede controlar el aspecto, el color, el tamaño de la casilla de verificación

3. ¡No se necesita HTML extra!

4. Solo se necesitan 3 líneas de CSS (la última es solo para darle ideas)

Editar : Como se señaló en el comentario, no se podrá acceder a la casilla de verificación mediante la tecla de navegación. Probablemente debería agregar tabindex=0 como una propiedad para que su etiqueta se pueda enfocar.

Answer 2

Avance:
http://jsfiddle.net/h4qka9td/

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

<div class="switch demo3">
  <input type="checkbox">
  <label><i></i>
  </label>
</div>

<div class="switch demo3">
  <input type="checkbox" checked>
  <label><i></i>
  </label>
</div>

Answer 3

El problema es que Firefox no escucha el ancho y la altura. Desactivar eso y tu bien para ir.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

Answer 4

Encontré que esta biblioteca solo para CSS es muy útil: https://lokesh-coder.github.io/pretty-checkbox/

O bien, podría hacer su propio rollo con este mismo concepto básico, similar al que publicó @Sharcoux. Es básicamente:

• Oculta la casilla de verificación normal (opacidad 0 y se coloca donde iría)
• Añadir una casilla de verificación falsa basada en css
• Use input:checked~div label para el estilo marcado
• asegúrese de que se for=yourinputID hacer clic en su <label> usando for=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: '''';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: ''/2713'';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class="pretty">
 <input type="checkbox" id="demo" name="demo">
 <div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>

<div class="pretty">
 <input type="checkbox" id="demo" name="demo">
 <div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>

Answer 5

Encontró this sugerencia útil hoy: puede hacer que las casillas de verificación sean más grandes en Safari, que generalmente es resistente a los enfoques habituales, con este atributo: -webkit-transform: scale(1.3, 1.3);

Answer 6

Es un poco feo (debido a la ampliación), pero funciona en la mayoría de los navegadores más nuevos:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

Answer 7

Estaba buscando hacer una casilla de verificación que era un poco más grande y miré el código fuente de 37Signals Basecamp para encontrar la siguiente solución:

Puede cambiar el tamaño de fuente para hacer la casilla de verificación un poco más grande:

font-size: x-large;

Luego, puede alinear la casilla de verificación correctamente haciendo:

vertical-align: top;
margin-top: 3px; /* change to center it */

Answer 8

Las otras respuestas mostraban una casilla de verificación pixelada, mientras que yo quería algo hermoso. El resultado se ve así:

Aunque esta versión es más complicada, creo que vale la pena intentarlo.

HTML

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

SCSS

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;

  &:last-of-type {
    border-bottom: 0;
  }
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;

    &:before {
    position: absolute;
    display: block;
    width: 18px;
    height: 22px;
    top: -2px;
    left: 0px;
    padding-left: 2px;
    background-color: transparent;
    transition: background-color .3s ease;
    content: ''/2713'';
    font-family: initial;
    font-size: 19px;
    color: white;
  }
}

// Checked state
input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;

  &:before {
    background-color: #5bc0de;
  }
}

Jsfiddle: https://jsfiddle.net/asbd4hpr/

Answer 9

Solución de trabajo para todos los navegadores modernos.

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

Compatibility:

• IE: 10+
• FF: 16+
• Chrome: 36+
• Safari: 9+
• Opera: 23+
• iOS Safari: 9.2+
• Chrome para Android: 51+

Apariencia:

• Chrome 58 (mayo de 2017), Windows 10

Answer 10

Tengo entendido que esto no es fácil de hacer en todos los navegadores. En lugar de intentar manipular el control de la casilla de verificación, siempre puede crear su propia implementación utilizando imágenes, javascript y campos de entrada ocultos. Supongo que esto es similar a lo que es niceforms (de la respuesta de Staicu lonut arriba), pero no sería particularmente difícil de implementar. Creo que jQuery también tiene un complemento para permitir este comportamiento personalizado (buscaré el enlace y publicaremos aquí si puedo encontrarlo).

Answer 11

Una solución fácil es usar la propiedad zoom :

input[type=checkbox] {
    zoom: 1.5;
}

Answer 12

Versión 2017 : https://jsfiddle.net/ksvx2txb/11/

Acerca de : el navegador usará la función de zoom css si es compatible, si no, usará transform: scale.

¿Por qué simplemente no usar transformar? Se ve feo en algunos navegadores, incluido Chrome en Mac.

Cromo - obras
Firefox (mac) - funciona
Opera - obras
Borde - trabaja

Firefox (ganar) - grande, borroso!
Safari - grande, borroso!

@supports (zoom:2) {
 input[type="radio"],  input[type=checkbox]{
 zoom: 2;
 }
}
@supports not (zoom:2) {
 input[type="radio"],  input[type=checkbox]{
  transform: scale(2);
  margin: 15px;
 }
}
label{
  /* fix vertical align issues */
 display: inline-block;
 vertical-align: top;
 margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>