htmlcsscheckboxangular-material

How to make a checkbox in circle shape with custom css?

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.

enter image description here

HTML Code:

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

Thanks in Advance.

Solution

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