javascript - 这些CSS复选框为什么不显示刻度线？

我已经设置了我的复选框的样式，它们看起来还不错，但是当我单击它们时它们并未显示选中的属性。它们是使用Zend生成的，我不确定是否有可能破坏样式的属性，或者是否缺少我想要的东西。

当我单击复选框时，为什么它们没有显示勾号？

我正在使用'label'复选框黑客，其中该复选框是隐藏的，您可以设置标签和：checked属性的样式，请找到以下代码：

CSS：

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}

input[type=checkbox] {
    display: none;
}
label:hover {
  background: #232323;
  color: #fff;
  cursor: pointer;
}
label:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.indexCheckbox label:before {
    border-radius: 3px;
}


input[type=checkbox]:checked + label:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
}

Zend形式：

public function searchForm() {

        $this->removeDecorator('HtmlTag');
        $sp = $this->createElement('checkbox', 'sw')
                ->setOptions(
                array(
                    'label' => 'Swimming Pool',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');
        $spa = $this->createElement('checkbox', 'spa')
                ->setOptions(
                array(
                    'label' => 'Spa ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $gym = $this->createElement('checkbox', 'gym')
                ->setOptions(
                array(
                    'label' => 'Gym ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $wifi = $this->createElement('checkbox', 'wifi')

                        ->setOptions(
                                array(
                                    'label' => 'Wifi ',
                                    'class' => 'prettyCheckbox',
                                )

        )->removeDecorator('HtmlTag');

        $parking = $this->createElement('checkbox', 'parking')
                ->setOptions(
                array(
                    'label' => 'On-Site Parking ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $golf = $this->createElement('checkbox', 'golf')
                ->setOptions(
                array(
                    'label' => 'Golf ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $wp = $this->createElement('checkbox', 'wp')
                ->setOptions(
                array(
                    'label' => 'Wedding Packages ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $cc = $this->createElement('checkbox', 'cc')
                ->setOptions(
                array(
                    'label' => 'Civil Ceremonies ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $city = $this->createElement('checkbox', 'city')
                ->setOptions(
                array(
                    'label' => 'City Central ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $oot = $this->createElement('checkbox', 'oot')
                ->setOptions(
                array(
                    'label' => 'Out Of Town ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $disabled = $this->createElement('checkbox', 'disabled')
                ->setOptions(
                array(
                    'label' => 'Disabled Access ',
                    'class' => 'prettyCheckbox',
                )
        )->removeDecorator('HtmlTag');

        $submit = $this->createElement('submit', 'submit')
                                ->setOptions
                                (array('label' => 'SEARCH OUR HOTELS',
                                       'class' => 'f-left btn-purple icon'
                                    ));

        $this->addElement($sp)
                ->addElement($spa)
                ->addElement($gym)
                ->addElement($wifi)
                ->addElement($parking)
                ->addElement($golf)
                ->addElement($wp)
                ->addElement($cc)
                ->addElement($city)
                ->addElement($oot)
                ->addElement($disabled)
                ->addElement($submit);
    }

}

哪个输出此html标记：

<div class="indexCheckbox">
                            <p class ="search-title">Facility Filter</p>
                            <form enctype="application/x-www-form-urlencoded" action="" method="post">
<dt id="sw-label"><label for="sw" class="optional">Swimming Pool</label></dt>

<input type="hidden" name="sw" value="0"><input type="checkbox" name="sw" id="sw" value="1" class="prettyCheckbox">
<dt id="spa-label"><label for="spa" class="optional">Spa</label></dt>

<input type="hidden" name="spa" value="0"><input type="checkbox" name="spa" id="spa" value="1" class="prettyCheckbox">
<dt id="gym-label"><label for="gym" class="optional">Gym</label></dt>

等等..有人可以帮忙吗？

编辑：我已经将以下类的样式拖入label：before类中：

 content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;

所以我知道样式有效，问题在于

input[type='checkbox']:checked + label:after

最佳答案

您的HTML是

<label for="sw" ...><input type="checkbox" id="sw" ...>

但您选择

input[type=checkbox]:checked + label:before {
...
}

将label移到checkbox之后时，它将选择适当的标签。

更新：

在Firefox中无法将display: none复选框隐藏起来；它确实适用于铬。您可以使用visibility: hidden隐藏该复选框

input[type=checkbox] {
    visibility: hidden;
}

看到这个JSFiddle