元素之外的CSS伪元素复选标记

时间：2014-09-24 18:29:59

标签： css twitter-bootstrap pseudo-element

我试图通过CSS创建一个带背景颜色的复选框。我的HTML看起来像：

<div class="filter-group">
    <!---some label--->
    <ul class="filter-options scrollable">
        <li class="filter-facet"><span class="label-text">Foo 1 </span><span class="muted count">(101)</span></li>
        <!--other items-->
    </ul>
</div>

但是，我遇到了各种问题（您可以在jsFiddle或最后的代码段中跟进）。

1）内联块

enter image description here

当我设置display: inline-block以便设置width和height 1em时，复选标记会显示在彩色元素之外。

为什么会出现这种情况，如何在内部获得复选标记？ 

.filter-facet::before {
    background-color: lightblue;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'';
}

2）内联

Width not controlled

如果我未设置display，则默认为inline，这意味着我无法再设置width或height。复选标记显示在元素内部，但取消选中该框会使元素缩小为空。我尝试放入一些不间断的空格（\00A0），但即使它确实有效，它也会显得有些混乱。

我可以控制inline元素的宽度/高度吗？ 

.filter-facet::before {
    background-color: lightblue;
    /*display: inline-block;*/ /*inline by default*/
    width: 1em; /*ignored, since it's inline*/
    height: 1em; /*ignored, since it's inline*/
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'\00A0\00A0'; /*trying to outsmart it... failed =)*/
}

3）内联块（Bootstrap 2）

Checkmark disappears with Bootstrap

最后，更糟糕的是，我使用的是Bootstrap 2.3.2。当我为引导程序包含CSS时，复选标记完全消失（没有Bootstrap，它将显示在元素之外）。

为什么复选标记会消失？

＆＃13;
＆＃13; 
/*
 * Using Bootstrap makes checkmark disappear
 * i.e. use the follow external resource in jsFiddle or uncomment the CSS from html HTML on SO
 * //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
 */

$(".filter-facet").on("click", function (e) {
    e.preventDefault();

    var $filterFacet = $(this);
    $filterFacet.toggleClass("filtered");
});
＆＃13; 
.filter-group {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 14px;
}

.filter-label:hover {
    color: #005580;
    cursor: pointer;
}

.filter-options {
    list-style-type: none;
    margin: 0px 0px 0px 11px;
}

.filter-options.scrollable {
    max-height: 200px;
    overflow-y: auto;
}

.filter-facet {
    margin: 0;
    display: block;
    font-size: 14px;
    /* text-index + padding-left = 0,
	 * also see .filter-options input[type="checkbox"] {margin}*/
    text-indent: -19px;
    padding-left: 19px;
    cursor: pointer;
    opacity: 1.0;
}

.filter-options .count {
    font-size: smaller;
}

.filter-facet::before {
    background-color: lightblue;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'';
}
＆＃13; 
<!--<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter-group selected">
    <span class="filter-label">
        <span class="label-text"> Some Filter</span>
    </span>
    <ul class="filter-options scrollable">
        <li class="filter-facet"><span class="label-text">Foo 1 </span><span class="muted count">(101)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 2 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 3 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 4 </span><span class="muted count">(13)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 5 </span><span class="muted count">(259)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 6 </span><span class="muted count">(537)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 7 </span><span class="muted count">(21)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 8 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 9 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 10 </span><span class="muted count">(8)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 11 </span><span class="muted count">(192)</span></li>
    </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

因为.filter-facet类

中的文本缩进 
.filter-facet {
    margin: 0;
    display: block;
    font-size: 14px;
    /* text-index + padding-left = 0,
     * also see .filter-options input[type="checkbox"] {margin}*/
    text-indent: -19px; /* Remove this css rule */
    padding-left: 19px;
    cursor: pointer;
    opacity: 1.0;
}

这是截图

enter image description here

答案 1 :(得分：1)

好吧，我只是回答号码 1 案例：

由于::before元素内的文本标识，标记向左移动。您可以轻松修复它，将其文本对齐设置为text-align: right，因此内容（勾号）将位于正方形内：

＆＃13;
＆＃13; 
/*
 * Using Bootstrap makes checkmark disappear
 * i.e. use the follow external resource in jsFiddle or uncomment the CSS from html HTML on SO
 * //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
 */

$(".filter-facet").on("click", function (e) {
    e.preventDefault();

    var $filterFacet = $(this);
    $filterFacet.toggleClass("filtered");
});
＆＃13; 
.filter-group {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 14px;
}

.filter-label:hover {
    color: #005580;
    cursor: pointer;
}

.filter-options {
    list-style-type: none;
    margin: 0px 0px 0px 11px;
}

.filter-options.scrollable {
    max-height: 200px;
    overflow-y: auto;
}

.filter-facet {
    margin: 0;
    display: block;
    font-size: 14px;
    /* text-index + padding-left = 0,
	 * also see .filter-options input[type="checkbox"] {margin}*/
    text-indent: -19px;
    padding-left: 19px;
    cursor: pointer;
    opacity: 1.0;
}

.filter-options .count {
    font-size: smaller;
}

.filter-facet::before {
    background-color: lightblue;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
    text-align: right;
}

.filter-facet.filtered::before {
    content:'';
}
＆＃13; 
<!--<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter-group selected">
    <span class="filter-label">
        <span class="label-text"> Some Filter</span>
    </span>
    <ul class="filter-options scrollable">
        <li class="filter-facet"><span class="label-text">Foo 1 </span><span class="muted count">(101)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 2 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 3 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 4 </span><span class="muted count">(13)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 5 </span><span class="muted count">(259)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 6 </span><span class="muted count">(537)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 7 </span><span class="muted count">(21)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 8 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 9 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 10 </span><span class="muted count">(8)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 11 </span><span class="muted count">(192)</span></li>
    </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

1：将以下行添加到.filter-facet::before样式中：

text-indent: 0;
line-height: 1;
text-align: center;

第一行将从文本缩进的box值继承的值恢复为默认值，将文本返回到框中。另外两行只是通过将角色放在盒子中心来美化外观。

编辑JSfiddle示例：http://jsfiddle.net/28b1tcch/3/

2：不直接。根据{{​​3}}，内联元素的width/height将被忽略。内联元素的大小取决于它们的字体（不只是font-size，但字体本身，具有相同font-size的不同字体可能占用不同的空间）。您可以使用对任何字符具有恒定宽度的等宽字体，但更好的方法是将显示设置为inline-block。

相关问题
最新问题