重新设置bootstrap 3中的复选框样式

Question

我真的很难尝试在bootstrap中设置复选框的样式，我目前有默认的复选框，我需要将其设置为看起来像这样 我知道这张照片是圆的，但是设计师犯了一个错误，所以不是圆形，它仍然需要是正方形

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

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属性。别忘了让你的ids独一无二。给输入一个类（我使用.image-checkbox），并定位输入，使其隐藏在屏幕外但仍然显示。

使用背景图片为未选中的框样式设置标签样式。使用：checked伪选择器和兄弟选择器（+），您可以定位在选择输入时应如何设置样式的样式。在这种情况下，我将背景图像更改为选中的图像并更改了字体颜色。

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