knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

submitボタンを装飾したい

input要素ではなくbutton要素を使用

フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。

なぜならinput要素は子要素をとることができないためです。

たとえばこんなsubmitボタンを想定します。

f:id:ShinImae:20151210151912j:plain

このような場合はbutton要素を使用すると柔軟な装飾が可能になります。

なぜならbutton要素はtype属性に、submitやresetなどを指定することでinput同様の役割を果たします

なおかつ、子要素にブロック要素もインライン要素も持つことができるため、かなり柔軟にスタイルを指定することができます。

たとえばこんなことが可能です。

<button type="submit">
    <span> Lorem ipsum </span>
</button>

当然ながら、ブラウザがデフォルトでもっているUIの外観はすべてリセットしなければいけません。

詳しい解説は以下記事を読んでいただくとして、下記のようにスタイルをリセットすることは大前提です。

button{
    appearance: none;
    -webkit-appearance: none;
-moz-appearance: none; }

www.htmq.com

ちなみにIE6/7において、ほんのわずかですがボタンの位置が意図した位置から下にずれてしまうときがあります。

f:id:ShinImae:20151210152101j:plain

そんなときは、以前IE6/7で画像がずれるバグを紹介したときと同様に、フォントサイズを調整します。

button{
    /font-size:0;
}