Czy mogę zmienić rozmiar pola wyboru za pomocą CSS?

458

Czy można ustawić rozmiar pola wyboru za pomocą CSS lub HTML w różnych przeglądarkach?

widthi sizedziała w IE6 +, ale nie w Firefoksie, gdzie pole wyboru pozostaje 16 x 16, nawet jeśli ustawię mniejszy rozmiar.

html css

— Wściekłość
źródło

3

Trudno to zrobić w różnych przeglądarkach. Roger Johansson zbadał to dość szeroko.

— Cristian Libardo,

Czytanie wszystkich komentarzy - jest to naprawdę prosty sposób, aby to zrobić bez udziału CSS: <input type = "checkbox" name = "checkboxName" value = "on" style = "szerokość: 110%; wysokość: 110%">

— Williamz902

Skorzystaj z tego prostego ans: stackoverflow.com/questions/57805394/…

— Pritesh

434

Jest trochę brzydki (ze względu na zwiększenie skali), ale działa w większości nowszych przeglądarek:

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>

Rozwiń fragment kodu

— jdw
źródło

3

wydaje się, że jest to poprawna odpowiedź, ponieważ ta oznaczona jako odpowiedź w wielu przypadkach nie oferuje żadnych rozwiązań (brak rozwiązania dla firefox na XP? w ogóle nie ma chromu?), jest nieaktualna i zawiera jedynie link i komentarz o niewielkiej wartości.

— nurettin

4

@jdw +1 dla tej odpowiedzi i nawet ja musiałem to zrobić, a twoja odpowiedź była pomocna. Ale jakoś stwierdziłem, że pole wyboru „skalowane” wydaje się być trochę zniekształcone. Nie wiem, czy jest tak w przypadku FF czy mojego systemu operacyjnego (Ubuntu 12.04). W każdym razie dzięki :)

— itsols

1

Skala () potrzebuje 2 parametrów dla chrome, FF i IE. Myślę, że. Jeśli więc po prostu zmienisz wszystkie skale na skalę (2,2), powinna działać każda przeglądarka.

— Onur Topal

10

dodaj transform: scale(2);też, aby zapewnić więcej dla każdej przeglądarki

— Adriano Resende

8

skalowanie wygląda okropnie, na skali 2 widać już poszczególne piksele. Nigdy nie wybrałbym tego rozwiązania dla pięknych dużych pól wyboru css.

— basZero

369

Działające rozwiązanie dla wszystkich nowoczesnych przeglądarek.

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

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

Rozwiń fragment kodu

Zgodność:

IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Opera: 23+
iOS Safari: 9.2+
Chrome na Androida: 51+

Wygląd:

Chrome 58 (maj 2017 r.), Windows 10

— Fellow Stranger
źródło

Czy dotyczy to starszych przeglądarek, np. 8?

— Huangism

1

@ Huangizm Nie, powyższy kod nie będzie miał żadnego wpływu w IE 8, który nie obsługuje tej transformwłaściwości. Obsługuje IE 9, -ms-transformktórego można użyć, jednak niektórzy twierdzą, że jest dość podzielony na piksele, więc lepiej pozostawić IE 9 z domyślną.

— Simon East

Nie jest to złe podejście, ponieważ istnieje ograniczenie skali, ponieważ powoduje pikselowanie pola wyboru.

— rishiAgar,

9

Ekstremalnie pikselowany w Chrome 64 z systemem macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Timo

Nadal pikselowany w Chrome 76.

— Labrador

68

Łatwym rozwiązaniem jest skorzystanie z właściwości zoom:

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

<input type="checkbox" />

Rozwiń fragment kodu

— Luiz
źródło

8

Nie jestem pewien, czy działa we wszystkich przeglądarkach, ale wygląda ładniej na ekranie niż rozwiązanie do przekształcania skali.

— Gwened

2

W Chrome 64 z systemem macOS 10.13.3 wygląda to na mniej pikselowane niż przy użyciu transformacji i skalowania

— Timo

Bardzo zniechęcony przez Mozillę. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— Trade-Ideas Philip

To interesujące, że Mozilla go zniechęca, podczas gdy Firefox jest prawie jedyną przeglądarką, która go nie obsługuje: caniuse.com/#feat=css-zoom

— ndreisg

47

Wersja 2020 - przy użyciu pseudoelementów rozmiar zależy od rozmiaru czcionki.

Domyślne pole wyboru / radio jest renderowane poza ekranem, ale CSS tworzy elementy wirtualne bardzo podobne do elementów domyślnych. Obsługuje wszystkie przeglądarki, bez rozmycia. Rozmiar zależy od rozmiaru czcionki. Obsługiwane są również operacje na klawiaturze (spacja, tabulatory).

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>

Rozwiń fragment kodu

Wersja 2017 - przy użyciu zoomu lub skali

Przeglądarka użyje niestandardowej zoomfunkcji, jeśli jest obsługiwana (niezła jakość) lub standardowa transform: scale(rozmazana).

Skalowanie działa we wszystkich przeglądarkach, ale będzie rozmyte w Firefox i 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>

Rozwiń fragment kodu

— ViliusL
źródło

Zoom wygląda, jakby działał dobrze na FQ. Może uważaj na starsze wersje Gecko?

— Neil Chowdhury,

27

Właśnie wyszłam z tym:

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>

Rozwiń fragment kodu

Oczywiście dzięki temu możesz zmienić wartość contentswoich potrzeb i użyć obrazu, jeśli chcesz, lub użyć innej czcionki ...

Najważniejsze jest tutaj:

Rozmiar pola wyboru pozostaje proporcjonalny do rozmiaru tekstu
Możesz kontrolować proporcje, kolor, rozmiar pola wyboru
Nie potrzebujesz dodatkowego HTML!
Potrzebne są tylko 3 wiersze CSS (ostatni z nich to tylko pomysły)

Edycja : jak wskazano w komentarzu, pole wyboru nie będzie dostępne przy użyciu klawiszy nawigacyjnych. Prawdopodobnie powinieneś dodać tabindex=0jako właściwość swojej etykiety, aby można ją było ustawić.

— Sharcoux
źródło

2

Niestety, ustawienie display:nonena wejściu uniemożliwi wybranie go tabkluczem, więc nie sądzę, że to dobry pomysł.

— Harfangk,

2

Dobra uwaga. Możesz dodać tabindex = 0 do danych wejściowych, aby to naprawić.

— Sharcoux

26

Podgląd:
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>

Rozwiń fragment kodu

— UniMe
źródło

@robertjd zgodził się, był zdezorientowany, dlaczego miałoby to być potrzebne do prostej transformacji

— Neil Chowdhury

@robertjd Nie są to nawet pola wyboru; są przełączane.

— TylerH

14

Wygląd pól wyboru wydaje się być domyślnie naprawiony. Ale jak wskazał Worthy7, można temu zaradzić za pomocą właściwości CSSappearance . Sprawi, że pola wyboru będą całkowicie puste, dzięki czemu będziesz mógł zdefiniować swój wygląd. Co jest miłego w tym: Możesz użyć istniejącego kodu HTML. Wada: to technologia eksperymentalna . Edge i IE nie używają stylu niestandardowego.

Oto potrzebne style CSS:

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>

Rozwiń fragment kodu

Zrzuty ekranu:

Chrom:

Firefox:

Krawędź:

TO ZNACZY:

— Jack Miller
źródło

8

Chciałem zrobić nieco większe pole wyboru i spojrzałem na kod źródłowy 37Signals Basecamp, aby znaleźć następujące rozwiązanie -

Możesz zmienić rozmiar czcionki, aby pole wyboru było nieco większe:

font-size: x-large;

Następnie możesz odpowiednio wyrównać pole wyboru, wykonując:

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

— Justin
źródło

3

rozmiar czcionki w ogóle nie wpływa na rozmiar rzeczywistego pola wyboru

— Michael

Nie działało dla mnie

— Amirhossein Tarmast

6

Za pomocą tego atrybutu możesz zwiększyć pola wyboru w Safari - co jest ogólnie odporne na zwykłe podejścia - -webkit-transform: scale(1.3, 1.3);

Źródło

— Avi Len
źródło

6

Myślę, że najprostszym rozwiązaniem jest zmiana stylu pola wyboru, jak sugerują niektórzy użytkownicy. Poniższy CSS działa dla mnie, wymaga tylko kilku wierszy CSS i odpowiada na pytanie 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 */
}

Jak wspomniano w tym poście, właściwość zoom wydaje się nie działać w przeglądarce Firefox, a przekształcenia mogą powodować niepożądane efekty.

Testowany na Chrome i Firefox powinien działać we wszystkich nowoczesnych przeglądarkach. Po prostu zmień właściwości (kolory, rozmiar, dół, lewo itp.) Zgodnie z własnymi potrzebami. Mam nadzieję, że to pomoże!

— JCdotNET
źródło

5

Rozumiem, że nie jest to wcale łatwe do zrobienia w różnych przeglądarkach. Zamiast próbować manipulować formantem pola wyboru, zawsze możesz zbudować własną implementację za pomocą obrazów, javascript i ukrytych pól wejściowych. Zakładam, że jest to podobne do tego, czym jest niceforms (z odpowiedzi Staicu lonut powyżej), ale nie byłoby szczególnie trudne do wdrożenia. Wierzę, że jQuery ma wtyczkę, która pozwala również na to niestandardowe zachowanie (poszuka linku i opublikuje tutaj, jeśli mogę go znaleźć).

— localshred
źródło

3

Uważam, że ta biblioteka tylko CSS jest bardzo pomocna: https://lokesh-coder.github.io/pretty-checkbox/

Możesz też stworzyć własną z tą samą podstawową koncepcją, podobną do tej, którą opublikował @Sharcoux. Jest to w zasadzie:

Ukryj normalne pole wyboru (krycie 0 i umieszczane tam, gdzie by to poszło)
Dodaj fałszywe pole wyboru oparte na css
Użyj input:checked~div labeldla sprawdzonego stylu
upewnij się, że <label>można go kliknąć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>

Rozwiń fragment kodu

— Squarecandy
źródło

3

Problem polega na tym, że Firefox nie słucha szerokości i wysokości. Wyłącz to i twój dobry start.

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

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

Rozwiń fragment kodu

— Worthy7
źródło

3

Inne odpowiedzi pokazały piksele, a ja chciałem czegoś pięknego. Wynik wygląda następująco:

Chociaż ta wersja jest bardziej skomplikowana, myślę, że warto spróbować.

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

Rozwiń fragment kodu

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

— hcarreras
źródło

0

możesz zmienić wysokość i szerokość w poniższym kodzie

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

Rozwiń fragment kodu

— ruchika vasu
źródło