2013年10月13日

角丸検索ボックスとサイト内検索の実装

角丸の検索BOXをよく見かけるので色々参考にして作ってみました。
kensaku.bmp

参考サイト
ttp://www.synck.com/
ttp://www.reindel.com/spruce_search_box_css/

で早速ですがCSS部分です。(青文字部分は消して使って下さい)

/* 検索BOX
----------------------------------------------------------- */
#searchbox {
    width: 201px;
    height: 31px;
    background-image: url(../images/bg_search_box.gif); 角丸検索窓の画像
}


#searchbox #s {
    float: left;
    padding: 0;
    margin: 6px 0 0 6px;
    border: 0;
    width: 159px;
    background: none;
    font-size: .8em;
    color: #a9a9a9; ←文字の色指定
}
#searchbox #go {
    float: right;
    margin: 3px 4px 0 0;
}

ここからHTML部分
*/*/*/*/*/*/*HTML部分*/*/*/*/*/*/**/*/*/*/*/*/*/
<div id="searchbox">
<form id="search_form" method="GET" action="絶対パスか相対パス">
  <input name="q" id="s" type="text" onkeyup="incremental()" onFocus="onFocus(this);" onBlur="onBlur(this);" value="サイト内検索" size="25" class="searchbox" />
  <input type="image" value="検索" src="common/images/btn_search_box.gif"角丸虫眼鏡の画像 width="27" height="24" id="go" alt="Search" title="Search" />
</form>
</div>

http://www.synck.com/より
サイト内検索CGIをダウンロードして設置
さらに検索ボックスにフォーカス(カーソルが来た時に)が当たった時に
内部の文字が消えるスクリプトをダウンロードして設置すれば完成♪


posted by mako at 10:27| Comment(0) | WEB技術 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。