フォーム要素などのネイティブな見た目を制御するプロパティです。noneを指定することでブラウザ標準のスタイルを無効化し、カスタムスタイルを適用する際に使用します。
appearance: none | auto| appearance-none | appearance: none |
| appearance-auto | appearance: auto |
appearance: none;ネイティブスタイルを無効化（カスタムスタイル適用可能に）
select { appearance: none; }セレクトボックスの矢印を消す
input[type="checkbox"] { appearance: none; }チェックボックスのデフォルトスタイルを無効化
appearance: auto;ブラウザデフォルトの見た目
カスタムデザインのフォーム部品を作る際の第一歩。appearance: none;後に独自のスタイルを適用する。
appearance: none;だけでは見た目が消えるだけ。独自のスタイルを必ず追加する必要がある。ベンダープレフィックス（-webkit-、-moz-）が必要な場合がある。
appearance: noneはOS由来の見た目を全て剥がすため、selectの矢印・checkboxの箱などが消えて「自分で全部作り直す」責任が発生します。色を変えたいだけならaccent-colorで済む——この段階の使い分けをAIは飛ばして、いきなり全自作の長いコードを出しがちです。剥がした後のフォーカス表示の再実装も忘れられがちです。
selectの見た目をカスタムしたい。appearance: noneで矢印が消える分の再実装とフォーカス対応込みで
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。