如何更改复选框的大小并添加 icheck 插件的边框半径? [英] How to change size of checkbox and add border radius of icheck plugin?
本文介绍了如何更改复选框的大小并添加 icheck 插件的边框半径?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的项目中使用 icheck.我想更改复选框的 size 并将 border-radius 添加到复选框.
我尝试了很多例子.
我的代码是:
<头><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"><风格>.c-半径{边框半径:5px；}</风格><身体><div class="checkbox icheck-primary"><input type="checkbox" 选中 id="primary" class="c-radius"/><label for="primary">保持用户名与电子邮件 ID 相同</label></html>
解决方案
添加这个 CSS
.icheck-primary[class*="icheck-"] >标签 {padding-left: 22px !important;行高:18px；}.icheck-primary[class*="icheck-"] >input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] >输入:第一个孩子+标签::之前{宽度:18px；高度:18px；边框半径:5px；左边距:-22px；}.icheck-primary[class*="icheck-"] >input:first-child:checked + input[type="hidden"] + label::after,.icheck-primary[class*="icheck-"] >输入:第一个孩子:检查+标签::之后{顶部:0px；宽度:4px；高度:8px；左:0px；}.icheck-primary[class*="icheck-"] >标签{padding-left:22px !important;行高:18px；}.icheck-primary[class*="icheck-"] >input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] >输入:第一个孩子 + 标签::之前{宽度:18px；高度:18px；边框半径:5px；左边距:-22px；}.icheck-primary[class*="icheck-"] >input:first-child:checked + input[type="hidden"] + label::after,.icheck-primary[class*="icheck-"] >输入:第一个孩子:检查+标签::之后{顶部:0像素；宽度:4px；高度:8px；左:0像素；}<头><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"><风格>.c-半径{边框半径:5px；}</风格><身体><div class="checkbox icheck-primary"><input type="checkbox" 选中 id="primary" class="c-radius"/><label for="primary">保持用户名与电子邮件 ID 相同</label></html>
I am using icheck in my project. I want to change the size of the checkbox and add border-radius to checkbox.
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>
解决方案
Add this 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 插件的边框半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
