0

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

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

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

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

编辑：我已将以下类的样式提取到标签中：类之前：

 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
4

1 回答 1

1

你的 HTML 是

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

但你选择

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

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

更新：

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

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

看到这个JSFiddle

于 2013-10-25T11:03:20.080 回答