Bisakah saya mengubah ukuran kotak centang menggunakan CSS?

459

Apakah mungkin untuk mengatur ukuran kotak centang menggunakan CSS atau HTML di seluruh browser?

widthdan sizebekerja di IE6 +, tetapi tidak dengan Firefox, di mana kotak centang tetap 16x16 bahkan jika saya mengatur ukuran yang lebih kecil.

html css Kemarahan
sumber

3

Ini sulit dilakukan lintas browser. Roger Johansson telah menyelidiki ini agak luas.

Cristian Libardo

Membaca semua komentar - ada cara yang sangat sederhana untuk melakukan ini tanpa melibatkan CSS: <input type = "checkbox" name = "checkboxName" value = "pada" style = "lebar: 110%; tinggi: 110%">

Williamz902

Gunakan ans sederhana ini: stackoverflow.com/questions/57805394/…

Pritesh

@ Williamz902 style=tag ini adalah CSS ...

Tiebe Groosman

434

Agak jelek (karena scaling up), tetapi berfungsi pada sebagian besar browser yang lebih baru:

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>

Luaskan cuplikan

jdw
sumber

3

ini tampaknya menjadi jawaban yang benar karena yang ditandai sebagai jawaban tidak menawarkan solusi dalam banyak kasus (tidak ada solusi untuk firefox di xp? tidak ada chrome sama sekali?), sudah usang dan hanya berisi tautan dan komentar yang tidak banyak nilainya.

nurettin

4

@ jdw +1 untuk jawaban ini dan bahkan saya harus melakukan ini dan jawaban Anda sangat membantu. Tapi entah bagaimana saya menemukan bahwa kotak centang 'scaled' muncul agak terdistorsi. Saya tidak tahu apakah ini masalah dengan FF atau OS saya (Ubuntu 12.04).

Bagaimanapun,

1

skala () membutuhkan 2 parameter untuk chrome, FF dan IE saya pikir. Jadi, jika Anda hanya mengubah semua skala ke skala (2,2), itu seharusnya berfungsi setiap browser.

Onur Topal

10

tambahkan transform: scale(2);juga, untuk memastikan lebih banyak peramban apa pun

Adriano Resende

8

penskalaan terlihat mengerikan, pada skala 2 Anda sudah melihat masing-masing piksel. Saya tidak akan pernah memilih solusi ini untuk kotak centang css besar yang indah.

basZero

369

Solusi yang berfungsi untuk semua browser modern.

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

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

Luaskan cuplikan

Kesesuaian:

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

Penampilan:

Chrome 58 (Mei 2017), Windows 10

Sesama Asing
sumber

Apakah ini mencakup peramban yang lebih lama seperti 8?

Huangism

1

@Huangism Tidak, kode di atas tidak akan berpengaruh apa pun di IE 8 yang tidak mendukung transformproperti. IE 9 mendukung -ms-transformyang dapat Anda gunakan, namun beberapa mengatakan itu cukup pixel sehingga mungkin lebih baik untuk meninggalkan IE 9 dengan default.

Simon East

Bukankah pendekatan di atas buruk, karena ada batasan untuk skala karena menyebabkan kotak centang menjadi pixelated.

rishiAgar

9

Sangat piksel pada Chrome 64 dengan macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

Timo

Masih piksel pada Chrome 76.

Labrador

68

Solusi mudah adalah menggunakan properti zoom:

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

<input type="checkbox" />

Luaskan cuplikan

Luiz
sumber

8

Tidak yakin itu berfungsi di semua browser, tetapi terlihat lebih cantik di layar daripada solusi transformasi skala.

Gwened

2

Di Chrome 64 dengan macOS 10.13.3 ini terlihat jauh lebih sedikit pixelated daripada menggunakan skala transform +

Timo

Sangat berkecil hati oleh Mozilla. developer.mozilla.org/en-US/docs/Web/CSS/zoom

Trade-Ideas Philip

Ini agak menarik bahwa Mozilla mengecilkan sementara Firefox hampir satu-satunya browser yang tidak mendukung itu: caniuse.com/#feat=css-zoom

ndreisg

47

Versi 2020 - menggunakan elemen semu, ukuran tergantung pada ukuran font.

Kotak centang / radio default ditampilkan di luar layar, tetapi CSS membuat elemen virtual yang sangat mirip dengan elemen standar. Mendukung semua browser, tanpa blur. Ukuran tergantung pada ukuran font. Tindakan keyboard (spasi, tab) juga didukung.

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>

Luaskan cuplikan

Versi 2017 - menggunakan zoom atau skala

Browser akan menggunakan zoomfitur non-standar jika didukung (kualitas bagus) atau standar transform: scale(buram).

Penskalaan berfungsi pada semua browser, tetapi itu akan buram pada Firefox dan 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>

Luaskan cuplikan

ViliusL
sumber

Zoom sepertinya berfungsi dengan baik pada FQ. Mungkin hati-hati dengan Gecko versi lama?

Neil Chowdhury

27

Saya baru saja keluar dengan ini:

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>

Luaskan cuplikan

Tentu saja, berkat ini, Anda dapat mengubah nilai contentkebutuhan Anda dan menggunakan gambar jika Anda ingin atau menggunakan font lain ...

Bunga utama di sini adalah:

Ukuran kotak centang tetap proporsional dengan ukuran teks
Anda dapat mengontrol aspek, warna, ukuran kotak centang
Tidak perlu HTML tambahan!
Hanya 3 baris CSS yang dibutuhkan (yang terakhir hanya untuk memberi Anda ide)

Sunting : Seperti yang ditunjukkan dalam komentar, kotak centang tidak akan dapat diakses oleh navigasi tombol. Anda mungkin harus menambahkan tabindex=0sebagai properti untuk label Anda agar dapat fokus.

Sharcoux
sumber

2

Sayangnya, pengaturan display:nonepada input akan mencegahnya dari dipilih dengan tabkunci jadi saya tidak berpikir ini adalah ide yang bagus.

Harfangk

2

Ucapan yang bagus Anda bisa menambahkan tabindex = 0 pada input untuk memperbaikinya.

Sharcoux

26

Pratinjau:
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>

Luaskan cuplikan

UniMe
sumber

@robertjd setuju, bingung mengapa ini diperlukan untuk transformasi sederhana

Neil Chowdhury

@robertjd Itu bahkan bukan kotak centang; mereka matikan.

TylerH

14

Tampilan kotak centang tampaknya sudah diperbaiki secara default. Tetapi seperti yang ditunjukkan oleh Worthy7 ini dapat diperbaiki menggunakan properti CSSappearance . Ini akan membuat kotak centang benar-benar kosong, sehingga Anda dapat menentukan penampilan Anda sendiri. Apa yang baik tentang ini: Anda dapat menggunakan kode HTML yang ada. Kelemahan: Ini adalah teknologi eksperimental . Edge dan IE tidak menggunakan gaya kustom.

Berikut adalah gaya CSS yang dibutuhkan:

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>

Luaskan cuplikan

Tangkapan layar:

Chrome:

Firefox:

Tepi:

YAITU:

Jack Miller
sumber

8

Saya sedang mencari untuk membuat kotak centang yang hanya sedikit lebih besar dan melihat kode sumber untuk 37Signals Basecamp untuk menemukan solusi berikut-

Anda dapat mengubah ukuran font untuk membuat kotak centang sedikit lebih besar:

font-size: x-large;

Kemudian, Anda dapat menyelaraskan kotak centang dengan benar dengan melakukan:

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

Justin
sumber

3

font-size tampaknya tidak mempengaruhi ukuran kotak centang yang sebenarnya

Michael

Tidak bekerja untuk saya

Amirhossein Tarmast

6

Anda dapat membuat kotak centang lebih besar di Safari - yang umumnya tahan terhadap pendekatan yang biasa - dengan atribut ini: -webkit-transform: scale(1.3, 1.3);

Sumber

Avi Flax
sumber

6

Saya pikir solusi paling sederhana adalah menata ulang kotak centang seperti yang disarankan beberapa pengguna. CSS di bawah ini berfungsi untuk saya, hanya membutuhkan beberapa baris CSS, dan menjawab pertanyaan 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 */
}

Seperti disebutkan dalam posting ini, properti zoom sepertinya tidak berfungsi di Firefox, dan transformasi dapat menyebabkan efek yang tidak diinginkan.

Diuji pada Chrome dan Firefox, seharusnya berfungsi untuk semua browser modern. Cukup ubah properti (warna, ukuran, bawah, kiri, dll.) Sesuai kebutuhan Anda. Semoga ini bisa membantu!

JCdotNET
sumber

5

Pemahaman saya adalah bahwa ini sama sekali tidak mudah dilakukan lintas-browser. Alih-alih mencoba memanipulasi kontrol kotak centang, Anda selalu dapat membangun implementasi Anda sendiri menggunakan gambar, javascript, dan bidang input tersembunyi. Saya berasumsi ini mirip dengan apa bentuk bagus (dari jawaban Staicu lonut di atas), tetapi tidak akan terlalu sulit untuk diterapkan. Saya percaya jQuery memiliki plugin untuk memungkinkan perilaku kustom ini juga (akan mencari tautan dan memposting di sini jika saya dapat menemukannya).

penduduk setempat
sumber

3

Saya menemukan perpustakaan khusus CSS ini sangat membantu: https://lokesh-coder.github.io/pretty-checkbox/

Atau, Anda bisa menggulung sendiri dengan konsep dasar yang sama, mirip dengan apa yang diposkan @Sharcoux. Itu pada dasarnya:

Sembunyikan kotak centang normal (opacity 0 dan tempatkan ke mana ia akan pergi)
Tambahkan kotak centang palsu berbasis css
Menggunakan input:checked~div label untuk gaya yang dicentang
pastikan Anda <label>diklik menggunakanfor=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>

Luaskan cuplikan

squarecandy
sumber

3

Masalahnya adalah Firefox tidak mendengarkan lebar dan tinggi. Nonaktifkan itu dan Anda baik untuk pergi.

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

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

Luaskan cuplikan

Layak7
sumber

3

Jawaban lainnya menunjukkan kotak centang pixelated, sementara saya menginginkan sesuatu yang indah. Hasilnya terlihat seperti ini:

Meskipun versi ini lebih rumit, saya pikir patut untuk dicoba.

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

Luaskan cuplikan

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

hcarreras
sumber

0

Anda dapat menghitung tinggi dan lebar dalam kode di bawah ini

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

Luaskan cuplikan

ruchika vasu
sumber

Bisakah saya mengubah ukuran kotak centang menggunakan CSS?

Jawaban: