こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part7です。
今回はリセット系の2つです。
バックナンバー
safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット
safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、うまくスタイルを反映させることができません。
そんな時は1回リセットしてしまいます。
DEMO
|
1 2 3 4 |
input[type="text"], input[type="submit"]{ -webkit-appearance: none; } |
『-webkit-appearance: none;』の1行を追加するだけです。
input[type=”text”]等の部分は問題が無さそうであればユニバーサルセレクタ（*{～}）で指定してもよいかもしれません。
max-width(height)をリセットする
例えばレスポンシブの時など、PC用にmax-width(height)を使用した時にスマホの方ではそれをリセットをしたい場合があります。
なんとなく『auto』を使えばいいのでは？と思うのですが、実は全然効かないので以下のクラスを設定します。
DEMO
|
1 2 3 |
.box{ max-width:initial; } |
各属性を初期値に戻せる『initial』を設定します。
ちなみにmin-width(height)も同様に使えますのでぜひ試してみてください。
