[英]Why aren't these CSS Checkboxes showing their ticks?
我已經設置了我的復選框的樣式,它們看起來不錯,但是當我單擊它們時它們並未顯示選中的屬性。 它們是使用Zend生成的,我不確定是否有可能破壞樣式的屬性,或者是否缺少我想要的東西。
當我單擊復選框時,為什么它們沒有顯示勾號?
我正在使用'label'復選框黑客,其中該復選框是隱藏的,您可以設置標簽和: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>
等等..有人可以幫忙嗎?
編輯:我已經將以下類的樣式拖入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;
所以我知道樣式有效,問題在於
input[type='checkbox']:checked + label:after
您的HTML是
<label for="sw" ...><input type="checkbox" id="sw" ...>
但您選擇
input[type=checkbox]:checked + label:before {
...
}
在checkbox
后移動label
,它將選擇適當的標簽。
更新:
隱藏帶有display: none
的復選框display: none
在Firefox中, display: none
無效。 它確實適用於鉻。 您可以隱藏具有visibility: hidden
的復選框visibility: hidden
input[type=checkbox] {
visibility: hidden;
}
看到這個JSFiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.