検索フォームにフォーカスをしたときのCSSを設定しよう。

やぁやぁこんばんは(・∀・)
今日も今日とて(　´∀｀)＜ぬるぽんです（ｲﾐﾌ

今回はアメブロの検索フォームをちょっとだけ修正しました。

タイトルにある通りなことなのです。
IEでは少々どうだったか覚えていないのですが、フォームにフォーカスがあたるとちょっと影がでてしまうのですが、これが初期状態だと色がグレーなんですよね。

こんな感じ


これでは何か色がアンマッチですよね(´・ω・｀)


なので、この影の色を調整しちゃえと言うわけで、変更してみました。
ちなみに「CSS3」ですので、対応ブラウザがIE9以上からなんですよね。（Windows 7以降であれば大半は問題ないかと）


変更すると上記の画像のような感じになります。


ぬぉぉ、書いてる時に足攣った( ；∀；)
ってそんなことは置いといて

CSSで検索フォームに装飾を行っていきましょう(｀・ω・´)

.blogSearchInput:focus {
    outline: 0;
    -webkit-box-shadow: 0px 0px 3px 1px #1ABC9C;
                  box-shadow: 0px 0px 3px 1px #1ABC9C;
}

これだけです（ぇ


まず、「outline: 0;」についてですが、これはフォーカス時の内側の線を消してあげるために必須な物です。
これがないと影の色を変更してあげることができません。

そして次に影の色を変更します。
「box-shadow: 0px 0px 3px 1px #1ABC9C;」が影の設定をするものです。
数値の左側から「X軸、Y軸、ぼかし距離、広がり距離、色」です。

また、上記の設定では外側に影を設定するものです。
内側に影を設定する場合は「inset」を追加することで可能となります。

例）「box-shadow: inset 0px 0px 3px 1px #1ABC9C;」

ちなみにこの「inset」は一番前か後ろのどちらかに書けば問題ありません。

X軸とY軸についてですが、
X軸は加算すれば右方向へずれていきます。減算で左方向へずれていきます。
Y軸は加算すれば下方向へずれ、減算で上方向へずれます。

XYを「0px」としている場合は、全体的に影が付きます。上記の２枚目の画像な感じですね。


これを上手く数値を設定することで、画像で作ったかのようなものが作れたりします。
こんな感じです。




ではでは、今日はこの辺でおやすみなさい(つ∀-)


最後まで読んで頂けたならありがとございます。

See you next...(´∀｀*)ﾉｼ