0

cssでwidth:autoの使いところ

CSSで便利そうだけど、イマイチ使い道がわからないwidth:auto。
僕が重宝してるのはフォームのテキスト部分です。

フォームの中のinputがほとんどがtextな場合、inputタグに200pxになるようにスタイルをかけます。
しかし、このままでは、checkboxやsubmitもinputタグなので同様に200pxになってしまいます。
これらにも同様に10pxや100pxとして幅を指定するのもいいですが、submitなんて万一width内に文字が入らなければ切れてしまうのでwidthを指定してないデフォルトに戻してあげるべきです。
そういう場合width:autoを使います。

autoは本来デフォルトに戻すという意味なので、これで小さくしたいのみinput要素があればdefaultというクラスをかけてあげればOKです。
こんな感じで。
input {
width:200px;
}

input.default {
width:auto;
}

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です