php - 如何设置 Zend 复选框的样式

Question

这真是令人沮丧!我有一个带有各种复选框的表单，我一生都无法弄清楚如何设置它们的样式，我尝试添加类，尝试设置 zend 生成的那些“dd”和“dt”标签的样式，尝试设置“div 输入”的样式{ }' 以及所有其他尝试让它发挥作用的方式。

基本上我只想要一些花哨的复选框，在我添加一些表单功能之前它们看起来很奇怪，现在它们看起来很垃圾!

看我的 Zend 表单:

public function searchForm() {
        $sp = $this->createElement('checkbox', 'sw')
                        ->setOptions(
                                array(
                                    'label' => 'Swimming Pool',

                                )

                        );

        $spa = $this->createElement('checkbox', 'spa')
                        ->setOptions(
                                array(
                                    'label' => 'Spa ',
                                )
                        );

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

        $wifi = $this->createElement('checkbox', 'wifi')
                        ->setOptions(
                                array(
                                    'label' => 'Wifi ',

                                )
                        );

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

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

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

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

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

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

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

        $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" >

                                <?php echo $this->form; ?>
                            </div>  

最后，CSS:

/* ------------------- home page checkbox styling  ------------------- */

.zend_form{
    margin-top:-15px;
    width:260px;
}
.indexCheckbox {
    width: 20px;    
    margin: 20px auto;
    position: relative;
}

.indexCheckbox label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    border-radius: 4px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.indexCheckbox label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.indexCheckbox label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.indexCheckbox input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

CSS 与它原来的样子很接近，我需要它看起来像本页底部的那样:

http://cssdeck.com/labs/css-checkbox-styles

输出的 html 看起来像这样:

<div class="zend_form" >
                                <p class ="search-title">Facility Filter</p>
                                <form enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form">
<dt id="sw-label"><label for="sw" class="optional">Swimming Pool</label></dt>
<dd id="sw-element">
<input type="hidden" name="sw" value="0"><input type="checkbox" name="sw" id="sw" value="1"></dd>
<dt id="spa-label"><label for="spa" class="optional">Spa</label></dt>
<dd id="spa-element">
<input type="hidden" name="spa" value="0"><input type="checkbox" name="spa" id="spa" value="1"></dd>
<dt id="gym-label"><label for="gym" class="optional">Gym</label></dt>
<dd id="gym-element">
<input type="hidden" name="gym" value="0"><input type="checkbox" name="gym" id="gym" value="1"></dd>
<dt id="wifi-label"><label for="wifi" class="optional">Wifi</label></dt>
<dd id="wifi-element">
<input type="hidden" name="wifi" value="0"><input type="checkbox" name="wifi" id="wifi" value="1"></dd>
<dt id="parking-label"><label for="parking" class="optional">On-Site Parking</label></dt>
<dd id="parking-element">
<input type="hidden" name="parking" value="0"><input type="checkbox" name="parking" id="parking" value="1"></dd>
<dt id="golf-label"><label for="golf" class="optional">Golf</label></dt>
<dd id="golf-element">
<input type="hidden" name="golf" value="0"><input type="checkbox" name="golf" id="golf" value="1"></dd>
<dt id="wp-label"><label for="wp" class="optional">Wedding Packages</label></dt>
<dd id="wp-element">
<input type="hidden" name="wp" value="0"><input type="checkbox" name="wp" id="wp" value="1"></dd>
<dt id="cc-label"><label for="cc" class="optional">Civil Ceremonies</label></dt>
<dd id="cc-element">
<input type="hidden" name="cc" value="0"><input type="checkbox" name="cc" id="cc" value="1"></dd>
<dt id="city-label"><label for="city" class="optional">City Central</label></dt>
<dd id="city-element">
<input type="hidden" name="city" value="0"><input type="checkbox" name="city" id="city" value="1"></dd>
<dt id="oot-label"><label for="oot" class="optional">Out Of Town</label></dt>
<dd id="oot-element">
<input type="hidden" name="oot" value="0"><input type="checkbox" name="oot" id="oot" value="1"></dd>
<dt id="disabled-label"><label for="disabled" class="optional">Disabled Access</label></dt>
<dd id="disabled-element">
<input type="hidden" name="disabled" value="0"><input type="checkbox" name="disabled" id="disabled" value="1"></dd>
<dt id="submit-label">&#160;</dt><dd id="submit-element">
<input type="submit" name="submit" id="submit" value="SEARCH OUR HOTELS" class="f-left btn-purple icon"></dd></dl></form>                            </div>  
                            <input type="hidden" name="findroom" id="findroom" value="1"/>
                        </form>
                    </div>

Answer 1

假设您的原始 CSS 规则是正确的——它们看起来当然是正确的——明显的问题是您的选择器； Zend 输出的选择器与您的 CSS 中的选择器不同。将 .indexCheckbox 更改为 input[type=checkbox] 并将 .indexCheckbox label 更改为 label。这应该可以解决问题，但是如果您为复选框之外的其他内容添加任何其他标签，则会遇到问题。

然后 Zend 输出看起来不必要地复杂；如果你可以修改它输出的内容，你可以实现这样的结果 JSFiddle.诀窍是能够在输入后立即放置标签，这样您就可以利用下一个同级 (+) 选择器。