Kann ich die Größe des Kontrollkästchens mithilfe von CSS ändern?

458

Ist es möglich, die Größe eines Kontrollkästchens mithilfe von CSS oder HTML in verschiedenen Browsern festzulegen?

widthund sizearbeiten in IE6 +, aber nicht mit Firefox, wo das Kontrollkästchen 16x16 bleibt, auch wenn ich eine kleinere Größe einstelle.

html css Wut
quelle

3

Dies ist schwer Cross-Browser zu tun. Roger Johansson hat untersucht diese ziemlich ausführlich.

Cristian Libardo

Lesen aller Kommentare - Es gibt eine wirklich einfache Möglichkeit, dies ohne CSS zu tun: <input type = "checkbox" name = "checkboxName" value = "on" style = "width: 110%; height: 110%">

Williamz902

Verwenden Sie diese einfache ans: stackoverflow.com/questions/57805394/…

Pritesh

@ Williamz902 das style=Tag ist CSS ...

Tiebe Groosman vor

434

Es ist ein wenig hässlich (aufgrund der Vergrößerung), aber es funktioniert auf den meisten neueren Browsern:

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>

Erweitern Sie das Snippet

jdw
quelle

3

Dies scheint die richtige Antwort zu sein, da die als Antwort gekennzeichnete Antwort in vielen Fällen keine Lösung bietet (keine Lösung für Firefox auf XP - überhaupt kein Chrom?), veraltet ist und nur einen Link und einen Kommentar von wenig Wert enthält.

Nurettin

4

@jdw +1 für diese Antwort und sogar ich hatte die Notwendigkeit, dies zu tun und Ihre Antwort war hilfreich. Aber irgendwie finde ich, dass das Kontrollkästchen "skaliert" etwas verzerrt erscheint. Ich weiß nicht, ob dies mit FF oder meinem Betriebssystem (Ubuntu 12.04) zusammenhängt.

Trotzdem

1

Die scale () benötigt 2 Parameter für Chrome, FF und IE, denke ich. Wenn Sie also nur alle Skalen in Skalierung (2,2) ändern, sollte dies in jedem Browser funktionieren.

Onur Topal

10

Fügen Sie transform: scale(2);auch hinzu, um mehr für jeden Browser zu gewährleisten

Adriano Resende

8

Die Skalierung sieht schrecklich aus. Auf Skala 2 sehen Sie bereits die einzelnen Pixel. Ich würde diese Lösung niemals für schöne große CSS-Kontrollkästchen wählen.

BasZero

369

Arbeitslösung für alle modernen Browser.

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

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

Erweitern Sie das Snippet

Kompatibilität:

IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Oper: 23+
iOS Safari: 9.2+
Chrome für Android: 51+

Aussehen:

Chrome 58 (Mai 2017), Windows 10

Fremder
quelle

Deckt dies ältere Browser wie z. B. 8 ab?

Huangism

1

@Huangism Nein, der obige Code hat in IE 8 keine Auswirkung, da er die transformEigenschaft nicht unterstützt . IE 9 unterstützt, -ms-transformdie Sie verwenden könnten, einige sagen jedoch, dass es ziemlich pixelig ist, daher ist es möglicherweise besser, IE 9 mit der Standardeinstellung zu belassen.

Simon East

Ist nicht über Ansatz schlecht, weil es eine Grenze für die Skalierung gibt, da dies dazu führt, dass das Kontrollkästchen pixelig wird.

RishiAgar

9

Extrem pixelig auf Chrome 64 mit macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

Timo

Immer noch pixelig auf Chrome 76.

Labrador

68

Eine einfache Lösung ist die Verwendung der Eigenschaft zoom:

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

<input type="checkbox" />

Erweitern Sie das Snippet

Luiz
quelle

8

Ich bin mir nicht sicher, ob es in allen Browsern funktioniert, aber es sieht auf dem Bildschirm hübscher aus als die Skalentransformationslösung.

Gwened

2

Auf Chrome 64 mit macOS 10.13.3 sieht dies viel weniger pixelig aus als mit transform + scale

Timo

Von Mozilla sehr entmutigt. developer.mozilla.org/en-US/docs/Web/CSS/zoom

Handelsideen Philip

Es ist ein bisschen interessant, dass Mozilla davon abrät,

ndreisg

47

Version 2020 - Bei Verwendung von Pseudoelementen hängt die Größe von der Schriftgröße ab.

Das Standard-Kontrollkästchen / Radio wird außerhalb des Bildschirms gerendert, aber CSS erstellt virtuelle Elemente, die den Standardelementen sehr ähnlich sind. Unterstützt alle Browser, keine Unschärfe. Die Größe hängt von der Schriftgröße ab. Tastaturaktionen (Leerzeichen, Registerkarten) werden ebenfalls unterstützt.

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>

Erweitern Sie das Snippet

Version 2017 - mit Zoom oder Skalierung

Der Browser verwendet nicht standardmäßige zoomFunktionen, wenn diese unterstützt werden (gute Qualität) oder standardmäßig transform: scale(verschwommen).

Die Skalierung funktioniert in allen Browsern, in Firefox und Safari ist sie jedoch verschwommen .

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>

Erweitern Sie das Snippet

ViliusL
quelle

Zoom scheint auf FQ gut zu funktionieren. Vielleicht auf ältere Versionen von Gecko achten?

Neil Chowdhury

27

Ich bin gerade damit herausgekommen:

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>

Erweitern Sie das Snippet

Dank dessen können Sie natürlich den Wert von contentan Ihre Bedürfnisse anpassen und ein Bild verwenden, wenn Sie dies wünschen oder eine andere Schriftart verwenden ...

Das Hauptinteresse hier ist, dass:

Die Größe des Kontrollkästchens bleibt proportional zur Textgröße
Sie können den Aspekt, die Farbe und die Größe des Kontrollkästchens steuern
Kein zusätzlicher HTML-Code erforderlich!
Es werden nur 3 Zeilen CSS benötigt (die letzte dient nur dazu, Ihnen Ideen zu geben)

Bearbeiten : Wie im Kommentar erwähnt, ist das Kontrollkästchen für die Tastaturnavigation nicht zugänglich. Sie sollten tabindex=0Ihr Etikett wahrscheinlich als Eigenschaft hinzufügen , um es fokussierbar zu machen.

Sharcoux
quelle

2

Leider display:noneverhindert die Einstellung der Eingabe, dass sie mit der tabTaste ausgewählt wird, sodass ich dies nicht für eine gute Idee halte.

Harfangk

2

Gute Bemerkung. Sie können tabindex = 0 am Eingang hinzufügen, um dies zu beheben.

Sharcoux

26

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

Erweitern Sie das Snippet

UniMe
quelle

@ Robertjd stimmte zu, war verwirrt darüber, warum dies für eine einfache Transformation benötigt werden würde

Neil Chowdhury

@robertjd Das sind nicht einmal Kontrollkästchen; Sie schalten um.

TylerH

14

Das Erscheinungsbild von Kontrollkästchen scheint standardmäßig festgelegt zu sein. Wie von Worthy7 hervorgehoben, kann dies jedoch mithilfe der CSS- appearanceEigenschaft behoben werden . Dadurch werden die Kontrollkästchen vollständig leer, sodass Sie Ihr eigenes Erscheinungsbild definieren können. Das Schöne daran: Sie können Ihren vorhandenen HTML-Code verwenden. Nachteil: Es ist experimentelle Technologie . Edge und IE verwenden nicht den benutzerdefinierten Stil.

Hier sind die benötigten CSS-Stile:

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>

Erweitern Sie das Snippet

Screenshots:

Chrom:

Feuerfuchs:

Kante:

IE:

Jack Miller
quelle

8

Ich wollte ein Kontrollkästchen erstellen, das nur ein bisschen größer war, und habe mir den Quellcode für 37Signals Basecamp angesehen, um die folgende Lösung zu finden:

Sie können die Schriftgröße ändern, um das Kontrollkästchen etwas größer zu machen:

font-size: x-large;

Anschließend können Sie das Kontrollkästchen ordnungsgemäß ausrichten, indem Sie folgende Schritte ausführen:

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

Justin
quelle

3

Die Schriftgröße scheint die Größe des tatsächlichen Kontrollkästchens überhaupt nicht zu beeinflussen

Michael

Hat bei mir nicht funktioniert

Amirhossein Tarmast

6

Mit diesem Attribut können Sie Kontrollkästchen in Safari vergrößern, das im Allgemeinen den üblichen Ansätzen widersteht: -webkit-transform: scale(1.3, 1.3);

Quelle

Avi Flachs
quelle

6

Ich denke, die einfachste Lösung besteht darin, das Kontrollkästchen neu zu gestalten, wie einige Benutzer vorschlagen. Das folgende CSS funktioniert für mich, erfordert nur ein paar Zeilen CSS und beantwortet die OP-Frage:

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

Wie in diesem Beitrag erwähnt, scheint die Zoom-Eigenschaft in Firefox nicht zu funktionieren, und Transformationen können unerwünschte Effekte verursachen.

Getestet auf Chrome und Firefox, sollte für alle modernen Browser funktionieren. Ändern Sie einfach die Eigenschaften (Farben, Größe, unten, links usw.) Ihren Anforderungen. Ich hoffe es hilft!

JCdotNET
quelle

5

Mein Verständnis ist, dass dies überhaupt nicht einfach ist, Cross-Browser zu machen. Anstatt zu versuchen, das Kontrollkästchen-Steuerelement zu manipulieren, können Sie jederzeit eine eigene Implementierung mit Bildern, Javascript und ausgeblendeten Eingabefeldern erstellen. Ich gehe davon aus, dass dies dem ähnelt, was niceforms ist (aus der obigen Antwort von Staicu lonut), aber nicht besonders schwierig zu implementieren wäre. Ich glaube, jQuery hat ein Plugin, das auch dieses benutzerdefinierte Verhalten berücksichtigt (ich werde nach dem Link suchen und hier posten, wenn ich ihn finde).

Einheimische
quelle

3

Ich fand diese reine CSS-Bibliothek sehr hilfreich: https://lokesh-coder.github.io/pretty-checkbox/

Oder Sie können Ihre eigenen mit demselben Grundkonzept rollen, ähnlich dem, was @Sharcoux gepostet hat. Es ist im Grunde:

Blenden Sie das normale Kontrollkästchen aus (Deckkraft 0 und platzieren Sie es dort, wo es hingehört).
Fügen Sie ein CSS-basiertes falsches Kontrollkästchen hinzu
Verwenden Sie input:checked~div labelfür den aktivierten Stil
Stellen Sie sicher, dass Sie <label>mit anklickbar sindfor=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>

Erweitern Sie das Snippet

squarecandy
quelle

3

Das Problem ist, dass Firefox nicht auf Breite und Höhe hört. Deaktiviere das und dein Gut zu gehen.

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

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

Erweitern Sie das Snippet

Worthy7
quelle

3

Die anderen Antworten zeigten ein pixeliges Kontrollkästchen, während ich etwas Schönes wollte. Das Ergebnis sieht folgendermaßen aus:

Obwohl diese Version komplizierter ist, denke ich, dass es sich lohnt, sie auszuprobieren.

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

Erweitern Sie das Snippet

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

hcarreras
quelle

0

Sie können die Höhe und Breite im folgenden Code ändern

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

Erweitern Sie das Snippet

Ruchika Vasu
quelle

Kann ich die Größe des Kontrollkästchens mithilfe von CSS ändern?

Antworten: