How do I make a checkbox rounded with custom CSS? Something similar to the image below. I know there are frameworks like bootstrap provides this, but I don't want to use a framework for this sole purpose as I'm already using angular material.
HTML Code:
<label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="notification.checked"> </label> Thanks in Advance.
You directly use the css from here http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ .. Just include .checkbox-circle class in your code and use.
If you're sure you want check boxes and not radio buttons
Check boxes are generally square and several can be checked, radio buttons are circular but only one out of a group can be selected
I've written a little bit of CSS based off this (checkboxfour) but I've changed it slightly to make it fit with what you've asked for.
.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>Also I've shown that you can use different colours by changing the class and of course adding the colour to the CSS, the last 3 sections of CSS are all about the colours. The middle one is the orange from the picture you shared.
If you follow the tutorial I've linked you'll get a good idea of what I've done and why.
I think it might be worth reading this which covers all of the input types (feel free to ignore if you know about them already)
I hope this helps.
Just set the checkbox's type to equal checkbox and add a border-radius as 100% in your CSS stylesheet, as well as specifying the height and width (which should be identical to each other in order to make a square as the base of your circle) , in order to make them totally rounded, as in perfect circles. Simple as that.
use radio buttons. if you want multiple selection, you can set the same name for all the radio buttons and use different id's.
You can use pseudoclasses for the label, and visually hide the actual checkbox.
/* 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; } Hope This Help You... :-)
/** * 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>