¿Puedo cambiar el tamaño de la casilla de verificación usando CSS?

459

¿Es posible establecer el tamaño de una casilla de verificación usando CSS o HTML en todos los navegadores?

widthy sizefunciona en IE6 +, pero no con Firefox, donde la casilla de verificación permanece 16x16 incluso si configuro un tamaño más pequeño.

html css Rabia
fuente
3
Esto es difícil de hacer entre navegadores. Roger Johansson ha investigado esto bastante extensamente.
Cristian Libardo
Lectura de todos los comentarios: hay una forma muy sencilla de hacerlo sin involucrar CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; height: 110%">
Williamz902
Utilice este simple ans: stackoverflow.com/questions/57805394/…
Pritesh
@ Williamz902 la style=etiqueta es CSS ...
Tiebe Groosman hace

Respuestas:

434

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 */
  transform: scale(2);
  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>
Expandir fragmento

jdw
fuente
3
esta parece ser la respuesta correcta, ya que la marcada como respuesta no ofrece soluciones en muchos casos (¿no hay solución para firefox en xp? ¿no hay cromo en absoluto?), está desactualizada y solo contiene un enlace y un comentario de poco valor.
nurettin
44
@jdw +1 para esta respuesta e incluso tuve la necesidad de hacerlo y su respuesta fue útil. Pero de alguna manera encuentro que la casilla de verificación 'escalado' aparece un poco distorsionada. No sé si esto es algo con FF o mi sistema operativo (Ubuntu 12.04). Gracias de todos modos :)
itsols
1
Creo que la escala () necesita 2 parámetros para Chrome, FF e IE. Entonces, si solo cambia todas las escalas a escala (2,2), debería funcionar en todos los navegadores.
Onur Topal
10
agregar transform: scale(2);también, para garantizar más para cualquier navegador
Adriano Resende
8
la escala se ve horrible, en la escala 2 ya ves los píxeles individuales. Nunca elegiría esta solución para hermosas casillas de verificación CSS grandes.
basZero
369

Solución de trabajo para todos los navegadores modernos.

input[type=checkbox] {
    transform: scale(1.5);
}
<label><input type="checkbox"> Test</label>
Expandir fragmento

Compatibilidad:

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

Apariencia:

  • Casillas de verificación escaladas en Chrome, Win 10 Chrome 58 (mayo de 2017), Windows 10
Extraño compañero
fuente
¿Esto cubre navegadores más antiguos como, por ejemplo, 8?
Huangism
1
@Huangism No, el código anterior no tendrá ningún efecto en IE 8 que no admite la transformpropiedad IE 9 es compatible con -ms-transformlo que podría usar, sin embargo, algunos dicen que está bastante pixelado, por lo que sería mejor dejar IE 9 con el valor predeterminado.
Simon East
El enfoque anterior no es malo, porque hay un límite para la escala, ya que hace que la casilla de verificación esté pixelada.
rishiAgar
99
Extremadamente pixelado en Chrome 64 con macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg
Timo
Todavía pixelado en Chrome 76.
Labrador
68

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

input[type="checkbox"] {
    zoom: 1.5;
}
<input type="checkbox" />
Expandir fragmento

Luiz
fuente
8
No estoy seguro de que funcione en todos los navegadores, pero se ve más bonito en la pantalla que la solución de transformación de escala.
Gwened
2
En Chrome 64 con macOS 10.13.3, esto parece mucho menos pixelado que usar transform + scale
Timo
Muy desanimado por Mozilla. developer.mozilla.org/en-US/docs/Web/CSS/zoom
Trade-Ideas Philip
Es un poco interesante que Mozilla lo esté desanimando mientras que Firefox es casi el único navegador que no lo admite: caniuse.com/#feat=css-zoom
ndreisg
47

Versión 2020 : utilizando pseudoelementos, el tamaño depende del tamaño de la fuente.

La casilla de verificación / radio predeterminada se representa fuera de la pantalla, pero CSS crea elementos virtuales muy similares a los elementos predeterminados. Admite todos los navegadores, sin desenfoque. El tamaño depende del tamaño de la fuente. Las acciones del teclado (espacio, pestañas) también son compatibles.

https://jsfiddle.net/ohf7nmzy/2/

body{
	padding:0 20px;
}
.big{
	font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
	position: relative;
	line-height: 1.4;
}
/* radio */
input[type=radio]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=radio] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
	background-color: #bbbbbb;
}
input[type=radio] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
	border: 0.2em solid #8eb9fb;
	margin-top: -0.2em;
	margin-left: -0.2em;
	box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
	background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 10%;
	transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
	position: absolute;
	content: "\2713";
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
	border-radius: 10%;
	color: white;
	text-align: center;
	line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
	border: 0.1em solid #8eb9fb;
	margin-top: -0.1em;
	margin-left: -0.1em;
	box-shadow: 0 0 0.2em #3b88fd;
}
<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
	<input type="checkbox" name="checkbox_3" id="gg" checked /> 
	<label for="gg">Checkbox big</label>

	<br />

	<input type="checkbox" name="checkbox_4" id="hh" /> 
	<label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
	<input type="radio" name="radio_2" id="cc" value="1" checked /> 
	<label for="cc">Radio big</label>

	<br />

	<input type="radio" name="radio_2" id="dd" value="2" /> 
	<label for="dd">Radio big</label>
</div>
Expandir fragmento

Versión 2017 : uso de zoom o escala

El navegador utilizará una zoomfunción no estándar si es compatible (buena calidad) o estándartransform: scale (borrosa).

El escalado funciona en todos los navegadores, pero será borroso en Firefox y Safari .

https://jsfiddle.net/ksvx2txb/11/

@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>
Expandir fragmento

ViliusL
fuente
Zoom parece que funciona bien en FQ. ¿Quizás ten cuidado con las versiones anteriores de Gecko?
Neil Chowdhury
27

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>
Expandir fragmento

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

El interés principal aquí es que:

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

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

  3. ¡No se necesita HTML adicional!

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

Editar : como se señaló en el comentario, la casilla de verificación no será accesible mediante la navegación de teclas. Probablemente debería agregar tabindex=0como propiedad a su etiqueta para que sea enfocable.

Sharcoux
fuente
2
Desafortunadamente, configurar la display:noneentrada evitará que se seleccione con la tabtecla, así que no creo que sea una buena idea.
Harfangk
2
Buen comentario Puede agregar tabindex = 0 en la entrada para arreglar esto.
Sharcoux
26

Vista previa:
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>
Expandir fragmento

UniMe
fuente
@robertjd estuvo de acuerdo, estaba confundido acerca de por qué esto sería necesario para una transformación simple
Neil Chowdhury
@robertjd Esas ni siquiera son casillas de verificación; son conmutadores
TylerH
14

La apariencia de las casillas de verificación parece estar corregida por defecto. Pero como señaló Worthy7, esto puede remediarse utilizando la propiedad CSSappearance . Hará que las casillas de verificación estén completamente vacías, para que pueda definir su propia apariencia. Lo bueno de esto: puede usar su código HTML existente. Desventaja: es tecnología experimental . Edge e IE no usan el estilo personalizado.

Estos son los estilos CSS necesarios:

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}
<label><input type="checkbox"> Test</label>
Expandir fragmento

Capturas de pantalla

Cromo: ingrese la descripción de la imagen aquí

Firefox ingrese la descripción de la imagen aquí

Borde: ingrese la descripción de la imagen aquí

ES DECIR: ingrese la descripción de la imagen aquí

Jack Miller
fuente
8

Estaba buscando hacer una casilla de verificación que fuera 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 que la casilla de verificación sea 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 */
Justin
fuente
3
el tamaño de fuente no parece afectar en absoluto el tamaño de la casilla de verificación real
Michael
No funcionó para mí
Amirhossein Tarmast
6

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);

Fuente

Avi Flax
fuente
6

Creo que la solución más simple es cambiar el estilo de la casilla de verificación como sugieren algunos usuarios. El CSS a continuación funciona para mí, solo requiere unas pocas líneas de CSS y responde la pregunta de OP:

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}

Como se menciona en esta publicación, la propiedad de zoom parece no funcionar en Firefox, y las transformaciones pueden causar efectos no deseados.

Probado en Chrome y Firefox, debería funcionar para todos los navegadores modernos. Simplemente cambie las propiedades (colores, tamaño, abajo, izquierda, etc.) según sus necesidades. ¡Espero eso ayude!

JCdotNET
fuente
5

Tengo entendido que no es nada fácil hacer cross-browser. En lugar de tratar de 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 anterior), pero no sería particularmente difícil de implementar. Creo que jQuery tiene un complemento para permitir este comportamiento personalizado también (buscará el enlace y lo publicará aquí si puedo encontrarlo).

localshred
fuente
3

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

O bien, puede rodar el suyo con este mismo concepto básico, similar a lo que publicó @Sharcoux. Básicamente es:

  • Ocultar la casilla de verificación normal (opacidad 0 y colocarla donde iría)
  • Agregar una casilla de verificación falsa basada en CSS
  • Usar input:checked~div labelpara el estilo marcado
  • asegúrese de que <label>se pueda hacer clic confor=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>
Expandir fragmento

Squarecandy
fuente
3

El problema es que Firefox no escucha el ancho y la altura. Desactiva eso y listo.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}
<label><input type="checkbox"> Test</label>
Expandir fragmento

Digno7
fuente
3

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

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

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item: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;
}
.checkbox-list__check: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;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}
<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
  <div class="checkbox-list__check"></div>
</label>
Expandir fragmento

JSFiddle: https://jsfiddle.net/asbd4hpr/

hcarreras
fuente
0

puedes cambiar la altura y el ancho en el siguiente código

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}
<div class="check">

     <label class="container1">Architecture/Landscape
										  

    <input type="checkbox" checked="checked">
										  

    <span class="checkmark"></span>
								 

	</label>
</div>
Expandir fragmento

ruchika vasu
fuente