javascript - 为什么这些 CSS 复选框不显示它们的勾号？

Question

我已经设计了我的复选框，它们看起来不错，但当我单击它们时它们没有显示选中的属性。它们是使用 Zend 生成的，我不确定是否有一个属性可能会破坏样式，或者我是否缺少某些东西。

为什么单击复选框时复选框不显示勾号？

我正在使用“标签”复选框 hack，其中隐藏了复选框，并且您设置了标签样式和 :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>

等等.....任何人都可以帮忙吗？

编辑:我已将以下类(class)的样式拉入标签:课前:

 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 

Answer 1

您的 HTML 是

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

但你选择了

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

当您将 label checkbox 移动时，它将选择适当的标签。

更新:

使用 display: none 隐藏复选框在 Firefox 中不起作用；它确实适用于 Chrome 。您可以使用 visibility: hidden

隐藏复选框

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

查看此 JSFiddle