wake-up-neo.com

Erstellen Sie CSS, um die Kontrollkästchen zu vergrößern

Ich versuche, die Größe meiner Kontrollkästchen auf einigen Seiten zu verdoppeln. Wie mache ich das in CSS? Ich möchte den Schwebeflug nicht stilisieren.

Ideen?

22
codeChris

Sie können den Checkbox-Hack immer verwenden, um ein eigenes Kontrollkästchen zu erstellen. Dies ermöglicht eine weitaus mehr Browser-kompatible Lösung.

Ich habe eine schnelle Demo erstellt here , natürlich müssten Sie ein transparentes .png eines Ticks bekommen, nicht das, was ich bekam.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}
<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

10
Andy

Um die Größe von Kontrollkästchen zu verdoppeln, können Sie die CSS-Skaliereigenschaft verwenden. Das (2,2) bedeutet 2 mal die Breite und 2 mal die Höhe des Originals, aber dies wird ziemlich groß sein. 

input[type="checkbox"] {
  transform:scale(2, 2);
}

Sie können auch Dezimalwerte für etwas größere Kontrollkästchen verwenden.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }
36
stwp

Die Gestaltung von Checkboxen ist ein riskantes Geschäft. Es ist eines dieser Dinge, das nie mit allen Browsern konsistent zu funktionieren scheint.

oder du kannst es mit versuchen 

 style="zoom:1.2"

jQuery bietet ein plugin an, um Checkboxen zu ersetzen

9
Rahul Tripathi

Das funktioniert. Es werden relative Größen verwendet, um es an Ihre aktuelle Schriftgröße anzupassen.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

Möglicherweise müssen Sie jedoch Ihre Margen anpassen.

5
Chloe

Ich denke, das Beste, was Sie tun können, ist eine größere Schriftgröße. Von dort hängt es ab, wie der Browser damit umgeht, es sei denn, Sie erstellen ein Div-Element, das ein ausgeblendetes Kontrollkästchen steuert. Es vergrößert es nicht so sehr.

input[type="checkbox"] {
  font-size: 50px;
}
3
Kurt Emch

Fügen Sie einfach ein Hintergrundbild zur Checkbox hinzu. Und passen Sie die Größen an, wie Sie möchten.

Der folgende Code fügt automatisch Hintergrund hinzu, wenn er checked ist, und die Größe bleibt unverändert mit unchecked Status.

Keine Notwendigkeit, wie anzugeben:

input[type=checkbox]:checked

oder

input[type=checkbox]:checked ~ div label

Für alle Kontrollkästchen:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

Siehe Geige hier .

0
aldrien.h

Ich habe diese Bibliothek mit Erfolg benutzt

http://plugins.krajee.com/checkbox-x

Es erfordert jQuery und Bootstrap 3.x

Laden Sie den Zip hier herunter: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Legen Sie den Inhalt der Zip in einem Ordner innerhalb Ihres Projekts ab

Pop die benötigten libs in Ihrem Header

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

Fügen Sie die Datensteuerelemente mit dem Element data-size = "xl" hinzu, um die Größe wie hier gezeigt zu ändern http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

Es gibt zahlreiche andere Funktionen, wenn Sie die Plugin-Site durchsuchen.

0
DropHit

Styling-Checkboxen sind eine sehr seltsame Welt voller Cross-Browser-Probleme. Weitere Informationen finden Sie hier http://www.456bereastreet.com/lab/form_controls/checkboxes/ Sie können auch mit Javascript eigene erstellen, dies ist jedoch für Benutzerzugänglichkeit nicht geeignet. 

Ich würde also in der Ablage ein Wechseln nach Möglichkeit vermeiden.

0
Dominic Green