重新设置Bootstrap 3中的复选框的样式 [英] Re-styling a checkbox in bootstrap 3
问题描述
我在尝试在引导程序中设置复选框的样式时遇到了很大的困难，我目前具有默认的复选框，我需要对其进行样式设置使其看起来像这样
我知道这张图片是圆形的，但是设计师犯了一个错误，所以它仍然不是正方形，而是圆形。
I'm having a real difficult time trying to style a checkbox in bootstrap, I currently have the default checkbox, and I need to style it to look like this I'm aware this picture it's round but the designer made a mistake, so instead of being round it still needs to be square
我查看了以下内容，并尝试了建议的内容。
I have looked at the following and also tried what is suggested.
另一方面，我确实找到了一个网站，该网站的样式与我要实现的样式相似，该网站位于您进行过滤的左侧
I did on the other hand find a website which has a similar to style to what i'm trying to achieve which is on here located on the left hand side where you do the filtering
我尝试使用Firebug来获取/签出
I tried using firebug to get/check out the CSS but I was unable to obtain the CSS.
推荐答案
因此，如果您不需要对IE8的支持，则可以轻松地进行操作。仅带有CSS的背景图片和：checked选择器。我使用了svg图片，但您可以使用字体，精灵或仅两个图片。
So if you don't need support for IE8 you can easily do this with a background image and the :checked selector in CSS only. I used an svg image, but you could use a font, sprite or just two images.
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
body {
background-color:#f5e1c6;
}
.image-checkbox {
position: absolute;
left: 100%;
visibility: hidden;
}
.image-checkbox-label {
height: 50px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/></svg>') no-repeat;
color: #7b7163;
}
.image-checkbox:checked + .image-checkbox-label {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/><polygon id="check" fill="rgb(251,253,223)" points="30.2,31.8 30.2,43 46.1,54 80.1,19.1 80.1,6.1 46.4,44.7 "/></svg>') no-repeat;
color: #c3b39c;
}
.checkbox label {
padding-left: 60px;
line-height: 50px;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="form">
<div class="checkbox">
<input id="remember-me" type="checkbox" class="image-checkbox" />
<label for="remember-me" class="image-checkbox-label">
Remember Me
</label>
</div>
</div>
</form>
</div>
</div>
</div>
为输入提供ID，以便您可以在标签上使用 for 属性。不要忘记让您的ID唯一。给输入一个类（我使用了 .image-checkbox ），然后放置输入使其隐藏在屏幕外但仍显示。
Give the input an id so that you can use the for attribute on the label. Don't forget to make your ids unique. Give the input a class (I used .image-checkbox), and position the input so that it's hidden offscreen but still displayed.
使用背景图像为未选中的框样式设置标签样式。使用：checked伪选择器和兄弟选择器（ + ），可以确定选择输入时应如何设置标签样式。在这种情况下，我将背景图像更改为选中的图像，并更改了字体颜色。
Style your label using the background-image for the unchecked box style. Using the :checked pseudo selector and the sibling selector (+), you can target how the label should be styled when the input is selected. In this case, I changed the background image to the checked image and changed the font color.
要使实际的标签文本很好地对齐，我还要覆盖一些 .checkbox标签的默认Bootstrap样式。您可以根据自己的需要进行调整。
To get the actual label text to align nicely, I'm also overriding some of the default Bootstrap styles for .checkbox label. You can adjust them to suit your needs.
这篇关于重新设置Bootstrap 3中的复选框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
