简体   繁体   中英

Why aren't these CSS Checkboxes showing their ticks?

I have styled up my checkboxes, they are looking alright although when I click them they are not showing the checked property. They are generated using Zend and I am not sure if there is a property that could be knocking the styling off or if there is something I am missing.

Why aren't the checkboxes showing a tick when I click them?

I am using the 'label' checkbox hack, where the checkbox is hidden and you style the label and :checked properties, please find the code below:

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 Form:

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);
    }

}

Which is outputting this html markup:

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

etc..... Can anyone help?

edit: I have pulled the styling for the following class into the label:before class:

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

So I know the styling works, the issue is with

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

Your HTML is

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

but you select for

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

When you move the label after the checkbox , it will select the appropriate label.

Update:

Hiding the checkbox with display: none doesn't work in Firefox; it does work with chromium. You can hide the checkbox with visibility: hidden

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

See this JSFiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM