Puis-je changer la taille de la case à cocher en utilisant CSS?

459

Est-il possible de définir la taille d'une case à cocher en utilisant CSS ou HTML sur tous les navigateurs?

widthet sizefonctionne dans IE6 +, mais pas avec Firefox, où la case à cocher reste 16x16 même si je mets une taille plus petite.

html css

— Rage
source

3

C'est difficile à faire entre les navigateurs. Roger Johansson a étudié cette question de manière assez approfondie.

— Cristian Libardo

Lire tous les commentaires - il existe un moyen très simple de le faire sans impliquer CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; height: 110%">

— Williamz902

Utilisez ce simple ans: stackoverflow.com/questions/57805394/…

— Pritesh

@ Williamz902 le style=tag est CSS ...

— Tiebe Groosman Il y a

434

C'est un peu moche (en raison de l'extension), mais cela fonctionne sur la plupart des navigateurs les plus récents:

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>

Développer l'extrait

— jdw
source

3

cela semble être la bonne réponse car celle marquée comme réponse n'offre pas de solutions dans de nombreux cas (pas de solution à firefox sur xp? pas de chrome du tout?), est obsolète et ne contient qu'un lien et un commentaire de peu de valeur.

— nurettin

4

@jdw +1 pour cette réponse et même j'ai eu le besoin de le faire et votre réponse a été utile. Mais d'une manière ou d'une autre, je trouve que la case à cocher «mise à l'échelle» apparaît un peu déformée. Je ne sais pas si c'est une chose avec FF ou mon OS (Ubuntu 12.04). Merci quand même :)

— itsols

1

l'échelle () a besoin de 2 paramètres pour le chrome, FF et IE je pense. Donc, si vous changez simplement toutes les échelles en échelle (2,2), cela devrait fonctionner avec tous les navigateurs.

— Onur Topal

10

ajouter transform: scale(2);aussi, pour assurer plus pour n'importe quel navigateur

— Adriano Resende

8

la mise à l'échelle est impressionnante, à l'échelle 2, vous voyez déjà les pixels individuels. Je ne choisirais jamais cette solution pour de belles grosses cases à cocher CSS.

— basZero

369

Solution de travail pour tous les navigateurs modernes.

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

<label><input type="checkbox"> Test</label>

Développer l'extrait

Compatibilité:

IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Opéra: 23+
iOS Safari: 9.2+
Chrome pour Android: 51+

Apparence:

Chrome 58 (mai 2017), Windows 10

— Fellow Stranger
source

Est-ce que cela couvre les navigateurs plus anciens comme ie 8?

— Huangisme

1

@Huangism Non, le code ci-dessus n'aura aucun effet dans IE 8 qui ne prend pas en charge la transformpropriété. IE 9 prend en charge -ms-transformque vous pourriez utiliser, mais certains disent qu'il est assez pixélisé, il serait donc préférable de laisser IE 9 avec la valeur par défaut.

— Simon East

L'approche ci-dessus n'est pas mauvaise, car il y a une limite d'échelle car elle provoque la pixelisation de la case à cocher.

— rishiAgar

9

Extrêmement pixellisé sur Chrome 64 avec macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Timo

Pixelisé encore sur Chrome 76.

— Labrador

68

Une solution simple consiste à utiliser la propriété zoom:

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

<input type="checkbox" />

Développer l'extrait

— Luiz
source

8

Pas sûr que cela fonctionne dans tous les navigateurs, mais il semble plus joli à l'écran que la solution de transformation d'échelle.

— Gwened

2

Sur Chrome 64 avec macOS 10.13.3, cela semble beaucoup moins pixélisé que l'utilisation de transform + scale

— Timo

Très découragé par Mozilla. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— Trade-Ideas Philip

C'est plutôt intéressant que Mozilla le décourage alors que Firefox est presque le seul navigateur qui ne le supporte pas: caniuse.com/#feat=css-zoom

— ndreisg

47

Version 2020 - utilisant des pseudo-éléments, la taille dépend de la taille de la police.

La case à cocher / radio par défaut est rendue en dehors de l'écran, mais CSS crée des éléments virtuels très similaires aux éléments par défaut. Prend en charge tous les navigateurs, pas de flou. La taille dépend de la taille de la police. Les actions du clavier (espace, tabulations) sont également prises en charge.

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>

Développer l'extrait

Version 2017 - en utilisant le zoom ou l'échelle

Le navigateur utilisera une fonctionnalité non standard zoomsi elle est prise en charge (belle qualité) ou standard transform: scale(floue).

La mise à l'échelle fonctionne sur tous les navigateurs, mais elle sera floue sur Firefox et 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>

Développer l'extrait

— ViliusL
source

Le zoom semble fonctionner correctement sur FQ. Faites peut-être attention aux anciennes versions de Gecko?

— Neil Chowdhury

27

Je viens de sortir avec ceci:

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>

Développer l'extrait

Bien sûr, grâce à cela, vous pouvez changer la valeur de contentselon vos besoins et utiliser une image si vous le souhaitez ou utiliser une autre police ...

Le principal intérêt ici est que:

La taille de la case à cocher reste proportionnelle à la taille du texte
Vous pouvez contrôler l'aspect, la couleur, la taille de la case à cocher
Pas besoin de HTML supplémentaire!
Seulement 3 lignes de CSS nécessaires (la dernière est juste pour vous donner des idées)

Modifier : Comme indiqué dans le commentaire, la case à cocher ne sera pas accessible par la navigation des touches. Vous devriez probablement ajouter tabindex=0une propriété à votre étiquette pour la rendre focalisable.

— Sharcoux
source

2

Malheureusement, le réglage display:nonesur l'entrée l'empêchera d'être sélectionné avec la tabclé, donc je ne pense pas que ce soit une bonne idée.

— Harfangk

2

Bonne remarque. Vous pouvez ajouter tabindex = 0 sur l'entrée pour résoudre ce problème.

— Sharcoux

26

Aperçu:
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>

Développer l'extrait

— UniMe
source

@robertjd a accepté, était confus quant à la raison pour laquelle cela serait nécessaire pour une simple transformation

— Neil Chowdhury

@robertjd Ce ne sont même pas des cases à cocher; ils basculent.

— TylerH

14

L'apparence des cases à cocher semble être corrigée par défaut. Mais comme l'a souligné Worthy7, cela peut être résolu en utilisant la propriété CSSappearance . Cela rendra les cases à cocher complètement vides, afin que vous puissiez définir votre propre apparence. Ce qui est bien à ce sujet: vous pouvez utiliser votre code HTML existant. Inconvénient: c'est une technologie expérimentale . Edge et IE n'utilisent pas le style personnalisé.

Voici les styles CSS nécessaires:

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>

Développer l'extrait

Captures d'écran:

Chrome:

Firefox:

Bord:

C'EST À DIRE:

— Jack Miller
source

8

Je cherchais à faire une case à cocher qui était juste un peu plus grande et j'ai regardé le code source de 37Signals Basecamp pour trouver la solution suivante-

Vous pouvez modifier la taille de la police pour agrandir légèrement la case à cocher:

font-size: x-large;

Ensuite, vous pouvez aligner correctement la case à cocher en procédant comme suit:

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

— Justin
source

3

la taille de la police ne semble pas du tout affecter la taille de la case à cocher réelle

— Michael

N'a pas fonctionné pour moi

— Amirhossein Tarmast

6

Vous pouvez agrandir les cases à cocher dans Safari - qui résiste généralement aux approches habituelles - avec cet attribut: -webkit-transform: scale(1.3, 1.3);

La source

— Avi Flax
source

6

Je pense que la solution la plus simple consiste à remodeler la case à cocher comme certains utilisateurs le suggèrent. Le CSS ci-dessous fonctionne pour moi, ne nécessite que quelques lignes de CSS et répond à la question 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 */
}

Comme mentionné dans cet article, la propriété zoom ne semble pas fonctionner sur Firefox et les transformations peuvent provoquer des effets indésirables.

Testé sur Chrome et Firefox, devrait fonctionner pour tous les navigateurs modernes. Modifiez simplement les propriétés (couleurs, taille, bas, gauche, etc.) selon vos besoins. J'espère que cela aide!

— JCdotNET
source

5

Ma compréhension est que ce n'est pas facile du tout de faire un navigateur croisé. Au lieu d'essayer de manipuler le contrôle de case à cocher, vous pouvez toujours créer votre propre implémentation à l'aide d'images, de javascript et de champs de saisie masqués. Je suppose que cela est similaire à ce que niceforms est (d'après la réponse de Staicu lonut ci-dessus), mais ne serait pas particulièrement difficile à mettre en œuvre. Je crois que jQuery a un plugin pour permettre également ce comportement personnalisé (recherchera le lien et publiera ici si je peux le trouver).

— localshred
source

3

J'ai trouvé cette bibliothèque CSS uniquement très utile: https://lokesh-coder.github.io/pretty-checkbox/

Ou, vous pouvez rouler le vôtre avec ce même concept de base, similaire à ce que @Sharcoux a publié. C'est essentiellement:

Masquer la case à cocher normale (opacité 0 et placée là où elle irait)
Ajouter une fausse case à cocher basée sur CSS
Utiliser input:checked~div labelpour le style vérifié
assurez-vous que votre <label>est cliquable en utilisantfor=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>

Développer l'extrait

— squarecandy
source

3

Le problème est que Firefox n'écoute pas la largeur et la hauteur. Désactivez cela et votre bon aller.

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

<label><input type="checkbox"> Test</label>

Développer l'extrait

— Digne7
source

3

Les autres réponses montraient une case pixelisée, alors que je voulais quelque chose de beau. Le résultat ressemble à ceci:

Même si cette version est plus compliquée, je pense qu'il vaut la peine de l'essayer.

.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>

Développer l'extrait

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

— hcarreras
source

0

vous pouvez modifier la hauteur et la largeur dans le code ci-dessous

.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>

Développer l'extrait

— ruchika vasu
source