understandard

2011-10-26

Mac 版 Safari でフォーカスしても placeholder が消えないときの対処法

placeholder が消えない

Mac 版 Safari で、フォーカスしても placeholder 属性に入れたテキストが消えない現象を見つけました。
現象を確認したのは、Mac 版 Safari 5.1.1 (7534.51.22) です。

対応している他のブラウザでは、フォーカスした時点で placeholder は隠れますが、Mac 版 Safari 5.1.1 (7534.51.22) ではテキストを入力し始めるまで隠れてくれません。
なお、Chrome 12.0.835.202 ( Windows、Mac ともに )、Windwos 版 Safari 5.1.1 (7534.51.22) では発生しませんでした。
そんな状態なので、バージョンアップしたら直るんじゃないかと思いますが、一応メモ。

追記: バグではなく、OS X Lion 上の Safari の仕様みたいです。言われるまで気づいていませんでしたが、iOS でも同じ挙動をしていました。矢倉さん、ありがとうございます。
参考: プレースホルダとHTML5のplaceholder属性
http://myakura.github.com/n/placeholder.html

対処法

Safari のユーザ・エージェント・スタイルシートに以下のような指定があります。

input::-webkit-input-placeholder,
isindex::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: #A9A9A9;
}

これを参考にして、:focus 状態の placeholder に対して、color: transparent; を指定。

input:focus::-webkit-input-placeholder,
isindex:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

上記の指定をしておけば、フォーカスした時点でテキストが隠れます。

placeholder が消えない: 対処済み

サンプル

Mac 版 Safari でフォーカス時に placeholder が消えない – jsdo.it – share JavaScript, HTML5 and CSS

背景色が白のサイトだったので、最初は color: #ffffff; にしてましたが、まとりん ( @ub_pnr ) に transparent でもいけるんじゃない?とアドバイスをもらい、試してみたところ問題なさそうだったので、transparent を採用しました。ありがとう、まとりん!

ちなみに、opacity: 0; も試してみましたが、こちらはうまくいきませんでした。

response

leave a reply

your email address will not be published.

you may use these HTML tags and attributes: <a href="" title=""> <em> <i> <strong> <blockquote cite=""> <q cite=""> <cite> <pre> <code> <del datetime=""> <ins datetime="">