如何更改复选框的大小并添加icheck插件的边框半径？

Question

I am using icheck in my project. 我在我的项目中使用icheck 。 I want to change the size of the checkbox and add border-radius to checkbox. 我想更改复选框的size并将border-radius添加到复选框。

I tried many examples. 我尝试了很多例子。

My code is: 我的代码是：

 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet"> <style> .c-radius{ border-radius:5px; } </style> </head> <body> <div class="checkbox icheck-primary"> <input type="checkbox" checked id="primary" class="c-radius"/> <label for="primary">Keep username same as email id</label> </div> </body> </html>

Answer 1

Add this CSS 添加此CSS

.icheck-primary[class*="icheck-"] > label {
    padding-left: 22px !important;
    line-height: 18px;
}

.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin-left: -22px;
}

.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after,
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after {
    top: 0px;
    width: 4px;
    height: 8px;
    left: 0px;
}

 .icheck-primary[class*="icheck-"] > label{ padding-left:22px !important; line-height: 18px; } .icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before{ width:18px; height:18px; border-radius:5px; margin-left:-22px; } .icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after, .icheck-primary[class*="icheck-"] > input:first-child:checked + label::after{ top:0px; width: 4px; height: 8px; left:0px; }

 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet"> <style> .c-radius{ border-radius:5px; } </style> </head> <body> <div class="checkbox icheck-primary"> <input type="checkbox" checked id="primary" class="c-radius"/> <label for="primary">Keep username same as email id</label> </div> </body> </html>

如何更改复选框的大小并添加icheck插件的边框半径？

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-09-05 12:35:33

如何更改复选框的大小并添加icheck插件的边框半径？

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-09-05 12:35:33

解决方案1
3 已采纳 2019-09-05 12:35:33