:focusでsafariのハイライトが超ジャマじゃね？

知ってる人は知っている。知らない人はちょっと幸せになるCSS3のテクニックを紹介。

CSSで:focusを使用してフォームを作ったとき、safariではちょっとマズいことが起こります。
safariには自動的にハイライト機能が働いて、青いボーダーが表示されます。
こんな感じで…ちょっと残念な感じですね。

これを、ナントカします！(｀・ω・´)

初心者向けの解説。

CSS3にはfocusっていう疑似クラスがあって、例えばテキストボックスや検索フォームに文字を入力しようとしたら、ボックスエリアのボーダー色とか背景色が変わったりするやつ。けっこう見た事あると思います。

きれいなミドリのボーダーがでましたね。
CSSの例

input[type="text"]:focus {
    border: 1px solid #aae472;
}

こんな感じでボーダーをグリーンにします。

ただし、これだとsafariではこうなります。ガーン；；

かっちょわるいです；

解決策

このsafariの自動ハイライト機能を切っちゃいましょう！
先ほどのCSSにoutline: 0;を追加でOK。

 input[type="text"]:focus {
     border: 1px solid #aae472;
     outline: 0;  /*safariの自動フォーカスを切る */
}

これで、Safariでもかっちょいいフォーカスが表示されます。
あ〜、しあわせ〜。

One Response so far.