UPDATE：2017.6.28
- CATEGORY
デフォルトCSSの初期化
こんにちは！アプリコットデザインのざっきーです！今回はコーディングの豆知識です。
コーディングしていて困るのがブラウザごとに表示が変わってしまうタグですよね。
これはブラウザ間で異なるデフォルトのCSSが効いてしまっているために起こるものですが
分かりやすいのはセレクトボックスの外観でしょうか。
では、まずselectタグを使用した場合の外観の違いについて見てみましょう。
通常であればそれぞれこのように表示されてしまいます。もちろん、実際に使用する際にはデザインの変更を行うことが多いですがその際、デフォルトのCSSが邪魔になることがありますよね。
そのような場合以下のCSSを追加することでデフォルトのCSSを消すことができますが注意点があります。
.select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
}
このCSSを追加したところでChromeのデザインは初期化されますがfirefoxとIEの場合矢印が残ってしまいますので下記を追加します。-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
}
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ”;
}
select::-ms-expand {
display: none;
}
これでデフォルトのCSSをリセットできるので作り込みができますね！-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ”;
}
select::-ms-expand {
display: none;
}
