堆栈内存溢出
  繁体   English   中英

样式 Bootstrap 4 自定义复选框

[英]Style Bootstrap 4 Custom Checkbox

 原文  2017-05-27 21:28:07  0   5    html/ css/ twitter-bootstrap/ bootstrap-4

问题描述

如何在 Bootstrap 4 中设置自定义复选框的样式？ 我已经尝试了所有方法，但我什至无法更改其背景颜色。

这是我的代码大纲： 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label>

我在这里的目标是什么？ 有人可以告诉我如何更改其背景吗？

谢谢。

5 个解决方案

解决方案1
 11  2018-05-24 00:39:45

它对我有用

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}

解决方案2
 9 已采纳  2017-05-29 06:59:05

 .custom-control{ background-color: grey; }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label>

解决方案3
 4  2018-01-21 15:54:48

您只需覆盖custom-control-indicator样式。

尝试如下

 <!DOCTYPE html> <html> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <style> .custom-control-input:checked~.custom-control-indicator{ color:white; background-color:red; } </style> <body> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label> </body> </html>

解决方案4
 1  2021-04-09 15:19:13

我为你做了一个小演示

 <style> .custom-checkbox { padding: 0; } .custom-checkbox .fa-toggle-on, .custom-checkbox .fa-toggle-off { font-size: 135%; /*this icon is relatively small*/ } .custom-checkbox input[type=checkbox] { visibility: collapse; width: 0px; margin-left: -0.25em; } .custom-checkbox input[type=checkbox] ~ .custom-check-on { display: none; } .custom-checkbox input[type=checkbox]:checked ~ .custom-check-on { display: inline; } .custom-checkbox input[type=checkbox]:checked ~ .custom-check-off { display: none; } .custom-checkbox input[type=checkbox]:disabled ~ * { color: #b6b4b4; } .custom-checkbox input[type=checkbox].error ~ .custom-check-on, .custom-checkbox input[type=checkbox].error ~ .custom-check-off { border: solid 2px red; } .custom-checkbox i.btn { overflow: hidden; color: transparent; position: relative; display: inline-block; width: 3em; padding: 0; font-style: normal; } .custom-checkbox .btn:after { content: ""; font-style: normal; border: 7px solid white; position: absolute; top: 0; bottom: 0; border-radius: 5px; } .custom-checkbox .custom-check-on.btn:after { right: -4px; } .custom-checkbox .custom-check-off.btn:after { left: -4px; } .custom-checkbox .custom-check-on.btn:before { content: "On"; color: white; margin-left: -10px; } .custom-checkbox .custom-check-off.btn:before { content: "Off"; color: #333; margin-right: -15px; } .custom-checkbox input[type=checkbox]:checked ~ .btn.custom-check-on { display: inline-block; } </style>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <div class="container"> <h3>Create custom checkbox with Bootstrap and Font Awesome</h3> <p>Here are some samples of customcheckboxes. You litterly can use any shape or color to make them the way you like it</p> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on btn btn-primary btn-sm"> </i><i class="custom-check-off btn btn-light active btn-sm"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on fa fa fa-circle"> </i><i class="custom-check-off fal fa-circle"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on far fa-check-square" style="color:black" > </i><i class="custom-check-off far fa-square" style="color:lightgray"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on text-info fa fa-toggle-on"> </i><i class="custom-check-off text-secondary fa fa-toggle-off"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on text-success far fa-smile"> </i><i class="custom-check-off text-danger fas fa-angry"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on fas fa-arrow-alt-circle-up"> </i><i class="custom-check-off far fa-arrow-alt-circle-down"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> </div>

<div class="container">
    <h3>Create custom checkbox with Bootstrap and Font Awesome</h3>
    <p>Here are some samples of customcheckboxes. You litterly can use any shape or color to make them the way you like it</p>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on btn btn-primary btn-sm">
        </i><i class="custom-check-off btn btn-light active btn-sm">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on fa fa fa-circle">
        </i><i class="custom-check-off fal fa-circle">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on far fa-check-square" style="color:black" >
        </i><i class="custom-check-off far fa-square" style="color:lightgray">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on text-info  fa fa-toggle-on">
        </i><i class="custom-check-off text-secondary fa fa-toggle-off">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on text-success far fa-smile">
        </i><i class="custom-check-off text-danger fas fa-angry">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>
    <label class="custom-checkbox">
        <input name="check" type="checkbox" autocomplete="off" >
        <i class="custom-check-on fas fa-arrow-alt-circle-up">
        </i><i class="custom-check-off far fa-arrow-alt-circle-down">
        </i><input name="check" type="hidden" value="false">
        <span class="ml-1">
            Check Box
        </span>
    </label>
    <br>


</div>

https://jsfiddle.net/eghbaly/t4zvshdu/4/ https://github.com/eghbaly/BS-CustomCheckbox

解决方案5
 0  2019-04-10 13:54:41

我和 olefrank 有同样的问题。 我想使用替代图像。 例如，在我们的 Intranet 的表单页面上，为了指示最喜欢的表单，我希望用户选择星号而不是复选框。 我让它处理图像，但我使用了 Bootstrap 4 文档中指定的标记：

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

然后是以下css：

.custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

但我很想知道如何使用网络字体指定替代图像，不幸的是，这超出了我的技能范围！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 修改引导复选框样式 Bootstrap取消选中复选框和样式 如何覆盖引导复选框样式 样式自定义复选框 label 外观 将复选框标签移动到引导自定义复选框的左侧 Bootstrap 4 Custom Checkbox缺少高度 Bootstrap弹出框中的自定义圆形复选框 使用CSS和Bootstrap创建自定义复选框 复选框按钮引导程序上的自定义颜色 对齐 Bootstrap 4 自定义表单（复选框）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM