Html 如何使用自定义css制作圆形复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37832505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a checkbox in circle shape with custom css?
提问by Shareer
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.
如何使用自定义 CSS 创建一个四舍五入的复选框？类似于下图的东西。我知道有像 bootstrap 这样的框架提供了这一点，但我不想将框架用于这个唯一目的，因为我已经在使用角材料。
HTML Code:
HTML代码：
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="notification.checked">
</label>
Thanks in Advance.
提前致谢。
回答by Atul Sharma
You directly use the css from here http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/..
Just include .checkbox-circleclass in your code and use.
你直接使用这里的 css http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/.. 只需.checkbox-circle在你的代码中包含类并使用。
回答by Andrew Bone
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.
我已经基于此（checkboxfour）编写了一些CSS，但我对其进行了轻微更改以使其符合您的要求。
.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.
此外，我还展示了您可以通过更改类来使用不同的颜色，当然还可以将颜色添加到 CSS，CSS 的最后 3 部分都是关于颜色的。中间的是你分享的图片中的橙色。
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 thiswhich covers all of the input types (feel free to ignore if you know about them already)
我想这可能是值得一读，这其中涵盖了所有的输入类型（随意忽略，如果你知道它们的话）的
I hope this helps.
我希望这有帮助。
回答by Sean Tank Garvey
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.
只需将复选框的类型设置为等于复选框，并在 CSS 样式表中添加一个边框半径为 100%，并指定高度和宽度（它们应该彼此相同，以便将正方形作为圆的底部） ) ，以使它们完全圆形，就像完美的圆圈一样。就那么简单。
回答by Lucas
use
用
.custom-checkbox .custom-control-label::before {
border-radius: 999px;
}
}
https://jsfiddle.net/lucashuang/ew4gc1aL/24/
https://jsfiddle.net/lucashuang/ew4gc1aL/24/
回答by Nir Kogman
use radio buttons. if you want multiple selection, you can set the same name for all the radio buttons and use different id's.
使用单选按钮。如果您想要多项选择，您可以为所有单选按钮设置相同的名称并使用不同的 ID。
回答by Arathi Sreekumar
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;
}
回答by Prashant Gupta
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>