アナログ
RSS  

Firefoxのplaceholderはなんで半透明なんだ2014/10/26 01:17

CSSを見直していたら、textboxにplaceholder属性が追加されていることにいまさら気づきました。

未入力のテキストボックスにヒント用文字列が表示できるのは便利だね。と、何の気なしに追加して「メイリオで強制表示」してもはみ出さないよう調整するため背景色を指定したら、何故かFirefoxの表示色が薄い。

IE 11で表示すると当たり前の色が表示されるので、Firefoxがおかしいのだろうと思ったのだけれど訳が分からない。
結局、placeholder属性に半透明が設定されている事に気づくまで2日ほどかかりました。orz

それにしても何故半透明がデフォなんでしょうかねぇ?わけがわからないよ。/人◕‿‿◕人\


それはさておき、せっかく手を入れたのだから少しは変化が欲しいと、以前ブログ内検索を手直ししたときに、一行表示するためあきらめた「WWW検索」と「ブログ内検索」の切り換えを復活させて、その案内にplaceholderを使う事にしました。
ただ、placeholderに対応してないIE9以下では、わけが分からなくなってしまうので、チェックボックスのtitleにヒントを記入しマウスオーバーでヒントがでるからと逃げることに……Android 2.1以下とかもう知らんがな(´・ω・)

こんな感じ

ところで、ベンダープレフィックスを消したくてCSSを見直したハズなのですけれど、placeholder属性の半透明を消すためにベンダープレフィックスが増えたしまったのは、もうお約束と言うより他ないのでしょうねぇ。orz

input#gtxt::-webkit-input-placeholde{background-color:#FFE}
input#gtxt::-moz-placeholder{opacity:1;color:#777;background-color:#FFE}
input#gtxt:-ms-input-placeholder{background-color:#FFE}

※Firefoxの半透明を解除したら文字が黒だったのでグレーに変更……

チャンチャン

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
スパムがウザイので合い言葉を入れるようにしました。山と言えば川だろJK


コメント:

トラックバック

このエントリのトラックバックURL: http://puppet.asablo.jp/blog/2014/10/26/7473942/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。