Я ввел свои флажки, они выглядят хорошо, хотя, когда я нажимаю на них, они не показывают проверенное свойство. Они создаются с использованием Zend, и я не уверен, есть ли свойство, которое может сбить стиль или если что-то мне не хватает.
Почему не отмечены флажки, когда я нажимаю на них?
Я использую флэшку с надписью "label", где флажок скрыт, и вы создаете ярлык и: проверенные свойства, пожалуйста, найдите следующий код:
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>
и т.д. Может ли кто-нибудь помочь?
edit: Я вытащил стиль для следующего класса в метку: перед классом:
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
, она выберет соответствующую метку.
Обновить:
Скрытие флажка с display: none
них не работает в Firefox; он работает с хромом. Вы можете скрыть флажок с visibility: hidden
input[type=checkbox] {
visibility: hidden;
}
Смотрите этот JSFiddle