【CSS Modules】appearanceプロパティの使い方

appearanceプロパティは、HTML要素の見た目を、オペレーティングシステムやブラウザが提供するネイティブなユーザーインターフェース（UI）部品のように見せるためのプロパティです。このプロパティを使用すると、例えば<button>要素や<input type="checkbox">といったフォーム部品に対して、その要素が本来持つデフォルトのスタイルを強制的に適用したり、逆に完全にリセットしたりすることが可能です。これにより、Webページ上でボタンやチェックボックスなどが、まるでOSに標準で備わっているかのような統一された外観を持つようになります。

主な値としては、button、checkbox、radioのように特定のUI部品の種類を指定するものがあります。また、noneを指定することで要素のデフォルトのappearanceを無効にし、完全にCSSで自由にスタイリングできるようにすることが可能です。多くのブラウザでは、このプロパティを使用する際に-webkit-appearanceや-moz-appearanceといったベンダープレフィックスが必要となる場合があります。モダンなWeb開発においては、appearance: none;でデフォルトのスタイルをリセットし、その後でカスタムのCSSを適用して独自のUIデザインを実現することが一般的です。このプロパティは、ブラウザ間の見た目の互換性を調整したり、既存のUIを無効化してデザインの自由度を高める際に役立ちます。

Copy
1selector {
2  appearance: none;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません