CSS kullanarak onay kutusu boyutunu değiştirebilir miyim?

459

Tarayıcılarda CSS veya HTML kullanarak bir onay kutusunun boyutunu ayarlamak mümkün müdür?

widthve sizeçalışma IE6 + 'da değil, onay kutusu kalır 16x16 Ben daha küçük bir boyutunu ayarlamak bile Firefox ile.

html css

— öfke
kaynak

3

Bu çapraz tarayıcı yapmak zordur. Roger Johansson bunu oldukça kapsamlı bir şekilde araştırdı .

— Cristian Libardo

Tüm yorumları okumak - bunu CSS içermeden yapmanın gerçekten basit bir yolu var: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; height: 110%">

— Williamz902

Bu basit ans'ı kullanın: stackoverflow.com/questions/57805394/…

— Pritesh

@ Williamz902 style=etiketi CSS ...

— Tiebe Groosman

434

Biraz çirkin (ölçeklendirme nedeniyle), ancak çoğu yeni tarayıcıda çalışır:

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>

Snippet'i genişlet

— JDW
kaynak

3

cevap olarak işaretlenmiş olan birçok durumda hiçbir çözüm sunmadığı için doğru cevap gibi görünüyor (xp üzerinde firefox için bir çözüm yok mu?

— nurettin

4

@jdw +1 bu cevap için ve hatta bunu yapmak için ihtiyacım vardı ve cevabınız yardımcı oldu. Ama bir şekilde 'ölçekli' onay kutusunun biraz bozuk göründüğünü fark ettim. Bu FF veya benim OS (Ubuntu 12.04) ile bir şey olup olmadığını bilmiyorum. Neyse teşekkürler :)

— itsols

1

scale () chrome, FF ve IE için 2 parametreye ihtiyaç duyduğunu düşünüyorum. Bu nedenle, tüm ölçekleri ölçek (2,2) olarak değiştirirseniz, her tarayıcıda çalışması gerekir.

— Onur Topal

10

transform: scale(2);herhangi bir tarayıcı için daha fazla sağlamak için de ekleyin

— Adriano Resende

8

ölçeklendirme çok hoş görünüyor, ölçek 2'de zaten tek tek pikselleri görüyorsunuz. Güzel büyük css onay kutuları için bu çözümü asla tercih etmem.

— basZero

369

Tüm modern tarayıcılar için çalışma çözümü.

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

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

Snippet'i genişlet

Uyumluluk:

IE: 10+
FF: 16+
Krom: 36+
Safari: 9+
Opera: 23+
iOS Safari: 9.2+
Android için Chrome: 51+

Görünüm:

Chrome 58 (Mayıs 2017), Windows 10

— Yabancı
kaynak

Bu, örn. 8 gibi eski tarayıcıları kapsıyor mu?

— Huangism

1

@Huangism Hayır, yukarıdaki kodun transformözelliği desteklemeyen IE 8'de herhangi bir etkisi olmayacaktır . -ms-transformKullanabileceğiniz IE 9 destekler , ancak bazıları oldukça pikselli olduğunu söylüyor, bu yüzden IE 9'u varsayılan olarak bırakmak daha iyi olabilir.

— Simon East

Yukarıdaki yaklaşım kötü değil, çünkü onay kutusunun pikselleştirilmesine neden olduğundan ölçek için bir sınır var.

— rishiAgar

9

Chrome 64'te macOS 10.13.3 ile son derece pikselli :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Timo

Hala Chrome 76'da pikselleştiriliyor.

— Labrador

68

Kolay bir çözüm özelliği kullanmaktır zoom:

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

<input type="checkbox" />

Snippet'i genişlet

— Luiz
kaynak

8

Tüm tarayıcılarda çalıştığından emin değil, ancak ekranda ölçek dönüştürme çözümünden daha güzel görünüyor.

— Gwened

2

MacOS 10.13.3 ile Chrome 64'te bu, dönüşüm + ölçek kullanmaktan çok daha az pikselli görünüyor

— Timo

Mozilla tarafından önerilmez. developer.mozilla.org/tr-TR/docs/Web/CSS/zoom

— Ticaret Fikirleri Philip

Firefox neredeyse desteklemeyen tek tarayıcı iken Mozilla'nın cesaretini kırması

— ilginçtir

47

2020 sürümü - sözde öğeler kullanarak, boyut yazı tipi boyutuna bağlıdır.

Varsayılan onay kutusu / radyo ekranın dışında oluşturulur, ancak CSS varsayılan öğelere çok benzer sanal öğeler oluşturur. Tüm tarayıcıları destekler, bulanıklık yok. Boyut, yazı tipi boyutuna bağlıdır. Klavye eylemleri (boşluk, sekmeler) de desteklenir.

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>

Snippet'i genişlet

2017 sürümü - yakınlaştırma veya ölçek kullanma

Tarayıcı zoom, destekleniyorsa (iyi kalite) veya standart transform: scale(bulanık) ise standart dışı özellik kullanacaktır .

Ölçekleme tüm tarayıcılarda çalışır, ancak Firefox ve Safari'de bulanık olacaktır .

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>

Snippet'i genişlet

— ViliusL
kaynak

Zoom, FQ'da iyi çalışıyor gibi görünüyor. Belki Gecko'nun eski sürümlerine dikkat et?

— Neil Chowdhury

27

Sadece bununla çıktım:

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>

Snippet'i genişlet

Tabii ki, bu sayede content, ihtiyaçlarınıza göre değerini değiştirebilir ve başka bir yazı tipi isterseniz veya kullanırsanız bir görüntü kullanabilirsiniz ...

Buradaki ana ilgi alanı:

Onay kutusu boyutu metin boyutuyla orantılı kalır
Onay kutusunun görünüşünü, rengini ve boyutunu kontrol edebilirsiniz
Ekstra HTML gerekmez!
Sadece 3 satır CSS gereklidir (sonuncusu size fikir vermek içindir)

Düzenle : Yorumda belirtildiği gibi, onay kutusuna tuş gezinmesi ile erişilemez. Muhtemelen tabindex=0etiketinizi odaklanabilir hale getirmek için bir özellik olarak eklemelisiniz .

— Sharcoux
kaynak

2

Ne yazık ki, display:nonegiriş ayarı tabanahtar ile seçilmesini engelleyecektir, bu yüzden bunun iyi bir fikir olduğunu düşünmüyorum.

— Harfangk

2

İyi not. Bunu düzeltmek için girişe tabindex = 0 ekleyebilirsiniz.

— Sharcoux

26

Önizleme:
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>

Snippet'i genişlet

— UniMe
kaynak

@robertjd kabul etti, bunun neden basit bir dönüşüm için gerekli olacağı konusunda kafası karışmıştı

— Neil Chowdhury

@robertjd Bunlar onay kutuları bile değil; geçiş yaparlar.

— TylerH

14

Onay kutularının görünümü varsayılan olarak sabittir. Ancak Worthy7 tarafından işaret edildiği gibi, bu CSS appearanceözelliği kullanılarak düzeltilebilir . Onay kutularını tamamen boş yapar, böylece kendi görünümünüzü tanımlayabilirsiniz. Bunun güzel tarafı: Mevcut HTML kodunuzu kullanabilirsiniz. Olumsuz: Deneysel bir teknolojidir . Edge ve IE özel stili kullanmaz.

Gerekli CSS stilleri şunlardır:

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>

Snippet'i genişlet

Ekran görüntüleri:

Krom:

Firefox:

kenar:

IE:

— Jack Miller
kaynak

8

Biraz daha büyük olan ve aşağıdaki çözümü bulmak için 37Signals Basecamp için kaynak koduna bakılan bir onay kutusu yapmak istiyordum.

Onay kutusunu biraz daha büyük yapmak için yazı tipi boyutunu değiştirebilirsiniz:

font-size: x-large;

Ardından, onay kutusunu aşağıdakileri yaparak düzgün bir şekilde hizalayabilirsiniz:

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

— Justin
kaynak

3

font boyutu, gerçek onay kutusunun boyutunu hiç etkilemiyor gibi görünmüyor

— Michael

Benim için çalışmadı

— Amirhossein Tarmast

6

Safari'de (genellikle olağan yaklaşımlara dirençli olan) onay kutularını daha büyük hale getirebilirsiniz: -webkit-transform: scale(1.3, 1.3);

Kaynak

— Avi Keten
kaynak

6

Bence en basit çözüm, bazı kullanıcıların önerdiği gibi onay kutusunu yeniden şekillendirmek. Aşağıdaki CSS benim için çalışıyor, yalnızca birkaç satır CSS gerektiriyor ve OP sorusunu cevaplıyor:

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 */
}

Bu yayında belirtildiği gibi, zoom özelliği Firefox'ta çalışmıyor gibi görünüyor ve dönüşümler istenmeyen etkilere neden olabilir.

Chrome ve Firefox'ta test edilmiştir, tüm modern tarayıcılarda çalışmalıdır. Özellikleri (renkler, boyut, alt, sol vb.) İhtiyaçlarınıza göre değiştirin. Umarım yardımcı olur!

— JCdotNET
kaynak

5

Benim anlayışım bunun çapraz tarayıcı yapmak hiç de kolay değil. Onay kutusu denetimini değiştirmeye çalışmak yerine, görüntüleri, javascript ve gizli giriş alanlarını kullanarak her zaman kendi uygulamanızı oluşturabilirsiniz. Bunun niceformların ne olduğuna benziyorum (Staicu lonut'un yukarıdaki cevabından), ancak uygulanması özellikle zor olmayacaktır. Ben jQuery de bu özel davranış için izin için bir eklenti olduğuna inanıyorum (bağlantı arayacak ve eğer bulabilirim burada gönderecektir).

— localshred
kaynak

3

Bu CSS salt kitaplığı çok yardımcı buldum: https://lokesh-coder.github.io/pretty-checkbox/

Ya da, @Sharcoux'un yayınladığı gibi, aynı temel kavramla kendi başınıza dönebilirsiniz. Temel olarak:

Normal onay kutusunu gizle (opaklık 0 ve gideceği yere yerleştirilir)
Css tabanlı sahte onay kutusu ekle
input:checked~div labelİşaretli stil için kullanın
<label>kullanarak tıklanabilir olduğundan emin olunfor=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>

Snippet'i genişlet

— squarecandy
kaynak

3

Sorun Firefox'un genişlik ve yüksekliği dinlememesidir. Bunu ve gitmenizin iyi olmasını engelleyin.

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

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

Snippet'i genişlet

— Worthy7
kaynak

3

Diğer cevaplar pikselli bir onay kutusu gösterdi, güzel bir şey istedim. Sonuç şuna benzer:

Bu sürüm daha karmaşık olmasına rağmen, denemeye değer olduğunu düşünüyorum.

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

Snippet'i genişlet

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

— hcarreras
kaynak

0

aşağıdaki kodda yüksekliği ve genişliği değiştirebilirsiniz

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

Snippet'i genişlet

— ruchika vasu
kaynak