logo标签列表

Bootstrap 4自定义复选框样式

htmlcsstwitter-bootstrapbootstrap-4
11

我如何在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>

我应该在这里选取什么目标？有没有人能向我展示如何更改它的背景颜色？

谢谢。

custom-control-indicator类在v4.0.0+中不存在。它存在于4.0.0-alpha.6中。 - Voicu
5个回答
11

它对我有用，搭配使用

.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;
}
@manuxi谢谢你的回答 - 你能详细解释一下这是什么意思吗：:checked~.custom-control-label::before？ - BenKoshy
请参见此处的说明：https://www.w3.org/TR/selectors-3/#general-sibling-combinators - manuxi
9

.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>

如果我想要一个自定义的勾选标记，比如来自于像 Font Awesome 这样的图标字体，我该怎么做呢？我该如何实现它？ - olefrank
如果您遵循官方的bootstrap 4.1文档，您会发现类在这里是错误的组件，这是无法工作的。 "custom-control" 应该在一个包围 div 中，与 "custom-checkbox" 一起，标签应该只有 "custom-control-input" class。请查看@manuxi的答案 https://dev59.com/bFcP5IYBdhLWcg3wi6kA#50499312 - c-chavez
4

您只需要覆盖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>

@TheAlbear，Windows与CSS无关。 - user8123187
1

我为您制作了一个小演示

<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

请解释您的代码是做什么的以及它如何实现。 - M-Chen-3
这其实非常简单。它使用CSS根据复选框的“check”状态打开/关闭自定义check-on和check-off组件。如果您正在使用asp.net，则需要另一个输入标记。 - Kevin Eghbali
-1

我和olefrank有同样的问题。我想使用另一种图片。例如，在我们内部网站的表单页面上，为了表示一个喜欢的表单，我希望用户选择一个星星而不是一个复选框。我已经用图片实现了它，但我使用了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%;}

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接