ユーザー操作
appearance
appearance は、フォームの部品をブラウザが用意した見た目で描くかを指定します。none にすると、セレクトボックスの矢印などが消え、CSS で一から見た目を作れます。
構文none | auto | <compat-auto> | <compat-special> …
none | auto | <compat-auto> | <compat-special>
<compat-auto> = searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button
<compat-special> = textfield | menulist-buttonプレビュー
好きな色
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box > :nth-child(2) {
appearance: none;
}コントロール
appearancenone
好きな色
解説
値の書き方
auto: ボタン、セレクトボックス、チェックボックスなどの部品を、ブラウザが用意した見た目で描きます。部品でない要素ではnoneと同じです。none: 部品の見た目を描かず、ふつうの CSS の箱として描きます。
初期値は none ですが、ブラウザの既定のスタイルが部品に auto を書いているので、部品はふだん auto で描かれています。プレビューでは、セレクトボックス（2 番目の子）に書いています。none にすると右端の矢印が消えます。
よく使う場面
チェックボックスやセレクトボックスを独自のデザインにするとき、まず appearance: none でブラウザの描き込みを消してから、枠や背景、矢印の画像を自分で付けます。
気をつけること
noneにしても、部品の働きは残ります。選んだりチェックしたりでき、キーボードの操作や読み上げもそのままです。代わりに矢印やチェックの印が消えるので、何の部品かわかる見た目を自分で付け直します。- チェックボックスやラジオボタンに
noneを書くと、Chrome では枠も大きさも無くなり、見えなくなります。width・height・borderを付け、:checkedのときの見た目も作ります。 checkboxやmenulist-buttonなどの値は、ブラウザごとに独自だったころの名残で、ほぼautoと同じです（textfieldは検索欄を、menulist-buttonはセレクトボックスを少し違う見た目にします）。- 仕様には、セレクトボックスを選択肢の一覧（
::picker(select)）まで CSS で作り直せるbase-selectもあります。Chrome・Edge 135 と Safari 27 から使えますが、このページの構文の表示が対応していないので、構文とプレビューからは外しています（同じく仕様にあるbaseも外しています）。