Html 如何使复选框四舍五入？

有没有办法使用引导或一些css属性来创建圆角复选框？

我认为创建圆角的最佳方法是使用

边框半径

属性。有很多复选框。 例如：

cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 10px;

最后一行

（边框半径：10px）

将显示一个圆角复选框。

尝试使用此css：

.checkbox-round {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: gray;
}

尽力

正文{
背景色：#f1f3f3；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.集装箱{
保证金：0自动；
}
.轮{
位置：相对位置；
}
.圆形标签{
背景色：#fff；
边框：1px实心#ccc；
边界半径：50%；
光标：指针；
高度：28px；
左：0；
位置：绝对位置；
排名：0；
宽度：28px；
}
.圆形标签：后{
边框：2倍实心#fff；
边界顶部：无；
边界权：无；
内容：“；
高度：6px；
左：7px；
不透明度：0；
位置：绝对位置；
顶部：8px；
变换：旋转（-45度）；
宽度：12px；
}
.round输入[type=“checkbox”]{
可见性：隐藏；
}
.round输入[type=“checkbox”]：选中+标签{
背景色：#66bb6a；
边框颜色：#66bb6a；
}
.round输入[type=“checkbox”]：选中+标签：之后{
不透明度：1；
}

.container{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认复选框*/
.容器输入{
位置：绝对位置；
不透明度：0；
光标：指针；
身高：0；
宽度：0；
}
/*创建自定义复选框*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：15px；
}
/*在鼠标悬停时，添加灰色背景色*/
.container:悬停输入~。选中标记{
背景色：#ccc；
}
/*选中复选框后，添加蓝色背景*/
.container输入：选中~.checkmark{
背景色：#2196F3；
}
/*创建复选标记/指示器（未选中时隐藏）*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示选中标记*/
.容器输入：选中~。选中标记：之后{
显示：块；
}
/*设置复选标记/指示器的样式*/
.容器。选中标记：之后{
左：9px；
顶部：5px；
宽度：5px；
高度：10px；
边框：纯白；
边框宽度：0 3px 3px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}

1
两个
三
四

有关通过高级CSS3设置复选框样式的详细信息，请参见：。希望这会有所帮助。在这方面，复选框不是边框，因此使用

边框半径

不会改变任何东西，而且在大多数浏览器中，复选框甚至不能设置为具有边框的样式，除非您使用的是

outline

属性，而这并不是完全等效的。这是可能的，看，我的答案链接死了anyways@skwisgaar也许是因为这个答案是3年前加上去的，实际上是4年前加上去的。但它什么也改变不了——它死了。唉。你认为有可能有一个可点击的文本标签触发复选框吗？这个解决方案打破了选项卡选择，使用屏幕阅读器的人无法访问。非webkit浏览器呢？