フォームボタンをCSSで画像置換する時の注意点(IE7,Opera)

  • あとで読みたい人は…

@cappeeです。

フォームボタンをCSSで画像置換する時に、ブラウザ毎で表示に癖があったのでメモしておきます。

フォームボタンをCSSで画像置換

HTML

フォームボタンのHTMLは下記です。

<input type="submit" value="送信する" class="btnSubmit">

HTML5だとbuttonタグでもOKです。

<button type="submit" class="btnSubmit">送信する</button>

CSS

私は下記のLIR(リーフィー/ラングリッジ式)という記述方法で通常画像置換を行なっています。

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px; 
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat; 
cursor:pointer;
}

注意点

inputタグで記述した場合

~IE7ではボタンが表示されません。IE7にも対応する場合はCSSハックを使い、height を指定するようにします。

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px;
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat;
cursor:pointer;
*padding-top:0;
*line-height:0;
*height:35px;
}

ただ、これだけだとボタンとvalueで記述したテキストがかぶっている状態です。Operaでも画像自体表示されるものの、IE7と同じようにボタンとテキストがかぶっています。こちらにも対応させる場合は、text-indent: -9999px; を追加します。

この text-indent でマイナスを指定して画像置換するPhark方式はSEO的にあまりよくない可能性があると一時期噂になってましたので、使うかの判断はお任せします。今まで主流だったやり方ですし、感覚的に使っても大きな影響はないとおもいます。(画像の文字とテキストが完全に違っているなどの悪質なSEO対策でない限り、です。)

.btnSubmit{
display: block;
height: 0;
overflow: hidden;
width:158px;
padding-top:35px;
line-height: 35px;
background:url("/images/btn_submit.png") top left no-repeat;
cursor:pointer;
*padding-top:0;
*line-height:0;
*height:35px;
text-indent: -9999px;
}

HTML5で記述した場合

buttonタグにclassを付けるとボタンが表示されません。下記のようにspanタグを追加し、そちらにclassを指定してください。

<button type="submit"><span class="btnSubmit">送信する</span></button>
Pocket
article clipper フォームボタンをCSSで画像置換する時の注意点(IE7,Opera)

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)