ＣＳＳ 検索窓をかわいく
2008/6/19 アメブロ検索の変更にともない
#search .searchbox を #search .inputText に変更下さい
下のＣＳＳは訂正済みです
再び元に戻されました・・・・下のCSSは訂正しました
サイドバーにつけているブログ内検索・・・・
どうせならかわいくしちゃいませんか？
CSSの最後にコピペしてください
１. 枠線
#search .searchbox {
width:100px;
border:1px solid #FF1493;
}
２. 枠線
width:100px;
border:1px dotted #0000FF;
}
３. 枠内色
width:100px;
background-color:#FFFF00;
}
４. 枠線＋枠内色
#search .searchbox {
width:100px;
border:1px solid #FF1493;
background-color:#FFC0CB;
}
５. 枠内にワンポイント画像（見本はアニメーション画像を使用）
#search .searchbox {/*画像を左は right → left */
width:100px;
background: url(画像のURL) no-repeat bottom right;
}
６. 枠内を画像でいっぱいに （検索文字が見えるよう工夫ください・・）
#search .searchbox {
width:100px;
background: url(画像のURL) repeat-x;
color: #ffffff;
}
７. 枠線＋枠内色
#search .searchbox {
width:100px;
border:none;
border-bottom:1px dotted #336633;
background-color:#00ff00;
}
８. IE以外で枠内にカーソルが乗ると色が変ります
border:1px solid #FF1493;
}
#search .searchbox:hover {/*カーソルON*/
border:1px solid #006;
background-color:#FFC0CB;
}
次は検索ボタン をCSSで変えます・・・・・