Html 样式 Bootstrap 4 自定义复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44221765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style Bootstrap 4 Custom Checkbox
提问by hemoglobin
How do I style a custom checkbox in Bootstrap 4? I've tried everything but I can't even change its background color.
如何在 Bootstrap 4 中设置自定义复选框的样式？我已经尝试了所有方法，但我什至无法更改其背景颜色。
This is my code outline:
这是我的代码大纲：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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>What do I target here? Could someone just show me how to change its background?
我在这里的目标是什么？有人可以告诉我如何更改其背景吗？
Thank you.
谢谢你。
采纳答案by Malathy Venkatesan
.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-rwtheitroadesjU2yc3z8GV/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>回答by manuxi
It worked for me with
它对我有用
.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;
}
回答by Malathy Venkatesan
You simply just had to override custom-control-indicatorstyle.
你只需要覆盖custom-control-indicator样式。
try as below
尝试如下
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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>回答by murphyme
I have the same question as olefrank. I want to use an alternative image. For example on our intranet's forms page, to indicate a favorite form, I'd like the user to select a star instead of a checkbox. I got it to work with images, but I used the markup specified in Bootstrap 4 documentation:
我和 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>
And then the following css:
然后是以下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%;}
But I would love to know how to specify an alternate image using a web font, unfortunately way outside my skill set!
但我很想知道如何使用网络字体指定替代图像，不幸的是，这超出了我的技能范围！
