検索窓をカラフルに

無機質な検索窓の色を変えてみます





このような透過されたアイコン画像を作ります

24px × 30px
　　 　　 　　 　　

お持ち帰り自由（記事最後の注意を参照ください）




/*検索ボタン*/
.blogSearchBtn {
width: 30px;/*アイコンの幅*/
height: 29px;/*アイコンの高さ*/
top: 4px;/*上からの位置*/
right: 1px;/*右からの位置*/
background: url(アイコン画像のＵＲＬ );
background-position:0 0;
background-repeat:no-repeat;
}
/*検索窓*/
.blogSearchInput {
border: 1px solid #ff00ff;/*枠線の色*/
background-color:#ffe4e1;/*枠の中の背景色*/
}
.blogSearchInput{
color:#ff69b4 !important;/*枠内の文字色*/
}

アイコン画像を検索窓の外に出す場合は・・・

横幅300pxのサイドにある場合・・

.blogSearchInput {
width:240px !important;/*検索窓の幅Ａ*/
}

検索窓の幅Ａ ＋ 画像の横幅 ＜ 300px

または・・

横幅180pxのサイドにある場合・・

.blogSearchInput {
width:120px !important;/*検索窓の幅Ａ*/
}

検索窓の幅Ａ ＋ 画像の横幅 ＜ 180px





横幅300pxのサイドバーに設置してあって

300pxの横幅を少し狭めたい場合は・・・



.blogSearchInput {
width:220px !important;/*検索窓の幅Ａ*/
}
.blogSearchForm {
width:250px !important;/*検索の幅Ｂ*/
margin:20px auto;
}

検索窓の幅Ａ ＋ 画像の横幅 ＜ 検索の幅Ｂ






注意！



このような画像を使った場合・・・

ブラウザーによって表示位置が違ってきます ので
おまじないが必要になります・・・？

周りが透過されている画像でしたら多少の表示位置の違いは気になりません・・