重新设计 bootstrap 中的复选框 3

Question

我在尝试为 bootstrap 中的复选框设置样式时遇到了困难，我目前有默认复选框，我需要将其设置为如下所示我知道这张图是圆的，但设计师犯了一个错误，所以不是圆的，它仍然需要是方形的

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

Twitter Bootstrap radio/checkbox

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

Example of the checkbox

我尝试使用 firebug 来 get/check 出 CSS 但我无法获得 CSS.

Answer 1

因此，如果您不需要对 IE8 的支持，您可以仅使用背景图像和 CSS 中的 :checked 选择器轻松实现。我使用了 svg 图片，但你可以使用字体、sprite 或只使用两张图片。

@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 独一无二。给输入一个 class（我用的是 .image-checkbox），然后定位输入，使其隐藏在屏幕外但仍显示。

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

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

重新设计 bootstrap 中的复选框 3

Re-styling a checkbox in bootstrap 3

css

checkbox

twitter-bootstrap-3

工作原理