在引导程序 3 中重新设置复选框的样式

Question

我很难在引导程序中设置复选框的样式，我目前有默认复选框，我需要将其设置为如下所示 我知道这张图片是圆的，但设计师犯了一个错误，所以不是圆的，它还需要是正方形的

我查看了以下内容并尝试了建议的内容。

Twitter Bootstrap radio/checkbox

另一方面，我确实找到了一个与我想要实现的风格相似的网站，该网站位于您进行过滤的左侧

Example of the checkbox

我尝试使用 firebug 获取/检查 CSS，但无法获取 CSS。

Answer 1

因此，如果您不需要对 IE8 的支持，您可以使用背景图片和 CSS 中的 :checked 选择器轻松完成此操作。我使用了 svg 图片，但您可以使用字体、精灵或仅使用两张图片。

@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），并定位输入，使其在屏幕外隐藏但仍显示。

使用未选中框样式的背景图像为标签设置样式。使用 :checked 伪选择器和同级选择器 (+)，您可以确定选择输入时标签的样式。在这种情况下，我将背景图像更改为选中的图像并更改了字体颜色。

为了使实际的标签文本很好地对齐，我还覆盖了.checkbox label 的一些默认引导样式。您可以根据自己的需要调整它们。