読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【html/css】aタグやinputでボタンとか作るときに文字を消す方法 〜text-indent使わずに〜

html css

よくaタグやinputタグのbackground-imageに画像を設定してボタンを作ることがあると思うのですが、
何かテキストを書いてしまうと画像の上にテキストが表示されて邪魔な時が。

で、よく用いられるのがtext-indentでテキストを見えない位置まで持っていく方法ですね。

〜参考になりました!〜
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス


↑で問題なさそうなのですが、
text-indentを使わない方法を教えてもらったのでメモ。


〜サンプルcssとhtml〜
※方法2(sample2)の方です。

backgroundの上にかぶるテキストを見えなくする方法(aやinputでボタンを作る時など)


paddingで広げた部分に画像を表示、はみ出ているテキストはoverflow: hidden;で隠します。
IE7で確認したところinputのpaddingがwidthに含まれて計算される?ようだったのでその対応も行いました。