スマートフォン用にいい感じの検索フォームスタイルにカスタマイズしてみます。
Expandable Mobile Search Formで紹介されていた 「Expandable Mobile Search Form」がステキなので Geeklog2.0のテーマWAIproCSS又はProfessional Cssの検索部分をこのデザインにカスタマイズしてみたいと思います。尚、この記事はGeeklog初心者又はCSS初心者のかたむけです。
スマートフォン用以外は「Demo: Expandable Search Form」のDemo Aのデザインにし、スマートフォンだけDemo Bのデザインにしたいと思います。
では早速、カスタマイズ方法(テーマWAIproCSS 2.6.0 for 2.0.0の記述で説明します)を説明していきます。
<!-- <div class="block-left" id="block-search">
<h2>{button_search}</h2>
<div class="block-left-content"> -->
<form action="{site_url}/search.php" method="get" id="searchform" class="basic">
<fieldset>
<legend>{button_search}</legend>
<ul>
<li><input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
onfocus="if (this.value == '{button_search}') this.value = ''"
onblur="if (this.value == '') this.value = '{button_search}'" onclick="document.getElementById('btn_search').style.display = 'block';"{xhtml}></li>
<li>
<input type="hidden" value="all" name="type"{xhtml}>
<input type="hidden" value="all" name="keyType"{xhtml}>
<input type="hidden" value="search" name="mode"{xhtml}>
<input type="submit" value="{button_search}" class="submit" id="btn_search"{xhtml}>
</li>
</ul>
<!-- <ul>
<li><a href="{site_url}/search.php">{button_advsearch}</a></li>
</ul> -->
</fieldset>
</form>
<!-- </div>
</div> -->
form#searchform {
float: right;
line-height: 26px;
margin: 10px 20px 0 0;
padding: 2px 5px;
position: relative;
width: 160px;
height: 26px;
}
form#searchform fieldset {
margin: 0;
padding: 0;
}
form#searchform ul {
list-style: none;
margin: 0;
padding: 0;
}
form#searchform ul li {
display: inline-block;
}
form#searchform input.search {
padding: 2px 10px 2px 30px;
width: 80px;
height: 25px;
border: 1px solid #cccccc;
background-color: #f1f1f1;
border-radius: 20px 20px 20px 20px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
transition: all 0.7s ease 0s;
}
form#searchform input.search:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}
form#searchform input.submit {
position: absolute;
top: 5px;
left: 10px;
width: 25px;
height: 25px;
background: url("images/icon_search.png") no-repeat 3px center transparent;
border: medium none;
cursor: pointer;
color: transparent;
}
@media only screen and (max-width: 519px) {
form#searchform input.search {
width: 15px;
padding: 2px 8px;
background: url("images/icon_search.png") no-repeat 6px center #f1f1f1;
color: transparent;
}
form#searchform input.submit {
display: none;
}
form#searchform input.search:focus {
width: 130px;
padding-left: 25px;
background: none;
color: #000;
}
}
onclick="document.getElementById('btn_search').style.display = 'block';"
を追記します。(getElementByIdの後のbtn_searchは、48行目で振ったIDです)
<input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
onfocus="if (this.value == '{button_search}') this.value = ''"
onblur="if (this.value == '') this.value = '{button_search}'"{xhtml}>
↓
修正後の記述
<input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
onfocus="if (this.value == '{button_search}') this.value = ''"
onblur="if (this.value == '') this.value = '{button_search}'" onclick="document.getElementById('btn_search').style.display = 'block';"{xhtml}>
これで一番初めに虫眼鏡アイコンをタップしても検索が始まらず、検索窓をタップした時にsubmit部分が表示されるようになります。
(Javascriptの記述は、もっとスマートな方法があると思いますが今回はこの記述にしました)動作確認は、Windows XP - Firefox 20.0.1,Google Chrome 27.0.1453.94 m,Opera12.15+ Windows7 - Internet Explorer9+Mac OS X 10.7.5 - Safari6.0,Firefox 21.0+iPod tauch - iOS 6.1.3+ iPad - iOS 6.1.3で行ってます。
簡単にカスタマイズできるので、やってみてください。
コメント (0件)