うまく機能するフォームを作成しました。ただし、チェックボックスの画像をカスタマイズした後、「Enter」キーを押してフォームを送信できません。どんな助けでも大歓迎です。
EDIT ご回答ありがとうございます。ただし、私のページには、複数のフォームがあります (もちろん...)
プロセス: フォーカス フォームを検出する必要があります。#Form_filters 検索フォームにフォーカスしている場合は送信します。注: 同じラジオ ボタンを何度もクリックすると、フォームのフォーカスが失われます。私はそれに取り組んでいますが、参加させていただければ幸いです=)
HTML
注: アクション URL を削除しました
<form action="" method="post" id="Form_filters" >
<br/><ul id="locations"><li id="title"><b>Location</b></li><br/><li><label class="location-checkbox ">
<input value="12" name="locations[]" type="checkbox" > Africa - 12 <span></span>
</label>
</li>
<li> <label class="location-checkbox ">
<input value="16" checked='checked' name="locations[]" type="checkbox" > Australasia - 16 <span></span>
</label>
</li>
<li> <label class="location-checkbox child-location">
<input class="australasia" value="29" checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> New Zealand - 29 <span></span>
</label>
</li>
<li> <label class="location-checkbox child-location">
<input class="australasia" value="24" checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> Queensland - 24 <span></span>
</label>
</li>
<li> <label class="location-checkbox child-location">
<input class="australasia" value="21" checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> Western Australia - 21 <span></span>
</label>
</li>
<li> <label class="location-checkbox ">
<input value="9" name="locations[]" type="checkbox" > UK - 9 <span></span>
</label>
</li>
<li><label class="location-checkbox child-location">
<input class="uk" value="18" name="locations[]" type="checkbox" style="margin-left:50px;"> Scotland - 18 <span></span>
</label>
</li>
<li><label class="location-checkbox child-location">
<input class="uk" value="19" name="locations[]" type="checkbox" style="margin-left:50px;"> Wales - 19 <span></span>
</label>
</li>
<br/></ul><ul id="tof" ><li id="title"><b>Type of role</b></li><li>
<label class="search-radio-button ">
<input value="58" name="tors[]" type="radio" class="radio tor-radio-button"> Freelance - 58 <span></span>
</label>
</li>
<li>
<label class="search-radio-button ">
<input value="56" name="tors[]" type="radio" class="radio tor-radio-button"> Full-time - 56 <span></span>
</label>
</li>
<li>
<label class="search-radio-button ">
<input value="59" name="tors[]" type="radio" class="radio tor-radio-button"> Internship - 59 <span></span>
</label>
</li>
<li>
<label class="search-radio-button ">
<input value="57" name="tors[]" type="radio" class="radio tor-radio-button"> Part-time - 57 <span></span>
</label>
</li>
<br/>
<input type="submit" id="searchsubmit" value="Submit button" />
</form>
注: すべての CSS タグを削除した場合、Enter キーを押すとフォームが送信されます。
CSS
ul, menu, dir {
list-style-type: none;
}
/* LOCATIONS CUSTOM CHECKBOXES */
/* hide real checkboxes */
.location-checkbox input {
display: none;
}
/* add new checkboxes */
.location-checkbox span {
width: 15px;
height: 15px;
float: left;
background: url("http://csscheckbox.com/checkboxes/lite-green-check.png");
background-repeat: no-repeat;
}
.location-checkbox input:checked + span {
background-position:0px -15px;
}
/* add margin for child cat */
.location-checkbox.child-location span {
margin-left: 50px;
}
/* add margin for label form */
ul#locations label {
padding-left: 10px;
}
/* RADIO BUTTON CUSTOM IMAGES */
/* hide real checkboxes */
.search-radio-button input {
display: none;
}
/* add new checkboxes */
.search-radio-button span {
width: 20px;
height: 20px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
}
.search-radio-button input:checked + span {
background-position:0px -20px;
}
/* Add a min-height on the li to float the content to the left */
ul#sectors li, ul#tof li{
min-height:20px;
}
ul#sectors li label, ul#tof li label {
margin-left:10px;
}