Wie mache ich eine Checkbox in Kreisform mit benutzerdefinierten CSS?

Question

Wie mache ich ein Kontrollkästchen mit benutzerdefinierten CSS gerundet? Etwas ähnliches wie das Bild unten. Ich weiß, dass es Frameworks wie bootstrap gibt, aber ich möchte kein Framework für diesen Zweck verwenden, da ich bereits eckiges Material verwende.

HTML-Code:

<label class="checkbox-inline"> 
     <input type="checkbox" name="favoriteColors" ng-model="notification.checked"> 
    </label> 

Vielen Dank im Voraus.

Answer 1

Sie verwenden direkt die css von hier http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ .. Fügen Sie einfach .checkbox-circle Klasse in Ihrem Code und verwenden.

Answer 2

Verwenden Sie Optionsfelder. Wenn Sie eine Mehrfachauswahl wünschen, können Sie für alle Optionsfelder denselben Namen festlegen und unterschiedliche IDs verwenden.

Answer 3

Sie können Pseudoklassen für die Beschriftung verwenden und das tatsächliche Kontrollkästchen visuell ausblenden.

/* Base for label styling */ 
[type="checkbox"]:not(:checked), 
[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
} 
[type="checkbox"]:not(:checked) + label, 
[type="checkbox"]:checked + label { 
    position: relative; 
    padding-left: 25px; 
    cursor: pointer; 
} 

/* checkbox aspect */ 
[type="checkbox"]:not(:checked) + label:before, 
[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: 2px; 
    width: 18px; height: 18px; 
    border-radius: 9px; //this should be half of height and width 
    border: 1px solid #999; 
    background: #ffff; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
} 
/* checked mark aspect */ 
[type="checkbox"]:checked + label:before { 
    background: orange; 
} 

Answer 4

Hoffnung Diese Hilfe Sie ... :-)

/** 
 
    * Checkbox Four 
 
    */ 
 
    .checkboxFour { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ddd; 
 
    margin: 20px 90px; 
 
    border-radius: 100%; 
 
    position: relative; 
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); 
 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); 
 
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5); 
 
    } 
 

 
    /** 
 
    * Create the checkbox button 
 
    */ 
 
    .checkboxFour label { 
 
    display: block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    z-index: 1; 
 
    background: #333; 
 
    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); 
 
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); 
 
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); 
 
    } 
 

 
    /** 
 
    * Create the checked state 
 
    */ 
 
    .checkboxFour input[type=checkbox]:checked + label { 
 
    background: #26ca28; 
 
    }

<section> 
 

 
     <div class="checkboxFour"> 
 
     <input type="checkbox" value="1" id="checkboxFourInput" name="" /> 
 
     <label for="checkboxFourInput"></label> 
 
     </div> 
 
    </section>

Answer 5

Wenn Sie sicher sind, dass Sie Boxen überprüfen möchten und nicht die Radio-Buttons

Kontrollkästchen sind in der Regel quadratisch und mehrere können überprüft werden, Radio-Tasten sind kreisförmig, aber nur eine aus einer Gruppe kann ausgewählt werden

Ich habe ein bisschen CSS basierend auf this (checkboxfour) geschrieben, aber ich habe es leicht geändert, damit es mit dem übereinstimmt, was Sie gefragt haben.

.customcb { 
 
    width: 17px; 
 
    height: 17px; 
 
    margin: 2px 0 2px 0; 
 
    background: #ddd; 
 
    border-radius: 100%; 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
 
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
 
} 
 
.customcb label.inner { 
 
    display: block; 
 
    width: 12.75px; 
 
    height: 12.75px; 
 
    border-radius: 100px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 2.125px; 
 
    left: 2.125px; 
 
    z-index: 1; 
 
    background: #eee; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); 
 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5) 
 
} 
 
.customcb label.outer { 
 
    margin-left: 25px; 
 
} 
 
.customcb [type=checkbox] { 
 
    display: none 
 
} 
 
.red.customcb input[type=checkbox]:checked+label.inner { 
 
    background: red 
 
} 
 
.orange.customcb input[type=checkbox]:checked+label.inner { 
 
    background: #d61 
 
} 
 
.green.customcb input[type=checkbox]:checked+label.inner { 
 
    background: green 
 
}

<div class="red customcb"> 
 
    <input type="checkbox" value="1" id="customcb1" name="" /> 
 
    <label class="inner" for="customcb1"></label> 
 
    <label class="outer" for="customcb1">Red</label> 
 
</div> 
 

 
<div class="orange customcb"> 
 
    <input type="checkbox" value="1" id="customcb2" name="" /> 
 
    <label class="inner" for="customcb2"></label> 
 
    <label class="outer" for="customcb2">Amber</label> 
 
</div> 
 

 
<div class="green customcb"> 
 
    <input type="checkbox" value="1" id="customcb3" name="" /> 
 
    <label class="inner" for="customcb3"></label> 
 
    <label class="outer" for="customcb3">Green</label> 
 
</div>

Auch habe ich gezeigt, dass man verschiedene Farben, die durch die Klasse zu ändern und natürlich Hinzufügen der Farbe auf die CSS verwenden können, sind alle in den letzten drei Abschnitte von CSS über die Farben. Der mittlere ist die Orange von dem Bild, das du geteilt hast.

Wenn Sie dem Tutorial folgen, das ich verlinkt habe, erhalten Sie eine gute Vorstellung davon, was ich getan habe und warum.

ich denke, es könnte sich lohnen this zu lesen, die alle Eingangstypen abdeckt (frei fühlen zu ignorieren, wenn man über sie wissen schon)

Ich hoffe, das hilft.

Answer 6

Setzen Sie einfach den Typ des Kontrollkästchens auf das gleiche Kontrollkästchen und fügen Sie einen Rahmenradius von 100% in Ihrem CSS-Stylesheet sowie die Höhe und Breite ein (die identisch sein sollten, um ein Quadrat zu bilden Basis Ihres Kreises), um sie vollkommen rund zu machen, wie in perfekten Kreisen. So einfach ist das.