如何使用自定义css制作圆形复选框? [英] How to make a checkbox in circle shape with custom css?

问题描述

如何制作带有自定义 CSS 的四舍五入复选框?类似于下图的东西.我知道有像 bootstrap 这样的框架提供了这一点，但我不想将框架用于这个唯一目的，因为我已经在使用角材料.

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 代码:

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

提前致谢.

推荐答案

你直接使用这里的 css http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ ..只需在代码中包含 .checkbox-circle 类并使用.

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.

这篇关于如何使用自定义css制作圆形复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！