何言ってるのかわからないですよね。

えっと、Webkit系ブラウザ（SafariとかChromeとか）でフォームの各要素が選択状態にある時、まわりにぼやーっと出ますよね。

現在どの要素が選択されているのか分かるので入力しやすい気もしますが、デザイン的にはよろしくない場合なんかもあったりします。

そんな時の対処法と、あとフォームを綺麗に見せるアイディアメモです。

フォームにフォーカスした時に出るもやーっとしたのを消す

正確にはアウトラインと呼ぶのかな？パラメータを見た感じでは。

で、アウトラインをナシにしてあげればこいつは消すことができます。

 みたいな感じでOK。

逆に色を変えたい時は、

といった具合です。

この時、:focus擬似クラスに対して指定しないと常にアウトラインが出ちゃうので注意。

逆に常時ぼやーっとさせておきたいならそれも有りかもしれませんが…あまり使わなそうですねｗ

デモです。Webkit系ブラウザ ((ChromeやSafari等。この投稿のデモはChromeでチェックしてます。)) で見てみてください。

おまけ：プレースホルダの色を変更する

フォームといえば、HTML5から追加されたplaceholder属性は、予め例文や説明を入力できるため、便利ですよね。

でも、ここはフォームの文字色指定を無視しますので、CSSの書き方によっては見づらくなったりデザイン的にアレな場合もあるかもしれません。

そんな時は、placeholder:カラーコード とすればプレースフォルダの文字色を変更できます。ただし、今のところWebkitとFirefoxだけの対応みたいです。

 webkit系は：が2つ＋inputがつく、Mozillaは1つでinputはいらないなど、微妙に書き方がこなるので地味に面倒ですので、こんなかんじで mixin を作っておくと便利です。

 で、呼び出す時は、

 みたいなかんじ。

文字サイズとか余白とか調整すると、良い感じなフォームが作れそうですね。

こちらもWebkit系ブラウザでご覧ください。