CSS - appearance

概要

属性名appearance
値none | auto | base | <compat-auto> | <compat-special> | base-select
値の詳細<compat-auto> = searchfield | textarea | checkbox | radio
  | menulist | listbox | meter | progress-bar | button
<compat-special> = textfield | menulist-button
初期値none
適用可能要素全要素
継承継承しない
サポートhttps://caniuse.com/?search=appearance

説明

フォーム部品(ウィジェット)等に対してブラウザのデフォルトのデザインを変更します。

none
セレクトボックスの右側に表示される下向き矢印、チェックボックス、ラジオボタンなどを非表示にします。
auto
ブラウザのデザインにまかせます。
base
まだあまりサポートされていません。
<compat-auto>
それぞれのウィジェットの表示となります。
base-select
Chrome 134 でサポートされました。詳細は下記の カスタマイザブルセレクトボックス を参照してください。

使用例

チェックボックスデザインの無効化

チェックボックスのデザインを appearance: none で無効化し、好みのデザインを適用します。

CSS
.my-example-1 {
  input[type="checkbox"] {
    appearance: none;
    outline: 1px solid #999;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    vertical-align: top;
    &:checked::before {
      content: "✔";
    }
  }
}
HTML
<div>
  <input id="cb1" type="checkbox">
  <label for="cb1">標準のチェックボックス</label>
</div>
<div class="my-example-1">
  <input id="cb2" type="checkbox">
  <label for="cb2">見栄えをカスタマイズしたチェックボックス</label>
</div>
表示

セレクトボックスデザインの無効化

セレクトボタンのデザインを appearance: none で無効化し、標準の選択矢印が表示されないようにし、独自デザインの矢印を表示しています。

CSS
.my-example-2 {
  select {
    margin-bottom: .3rem;
    width: 20rem;
    height: 2rem;
    padding: .2rem;
  }
  .my-select {
    position: relative;
    select {
      appearance: none;
    }
    .arrow {
      position: absolute;
      top: 7px;;
      left: 300px;
    }
  }
}
HTML
<div class="my-example-2">
  <div>
    <select>
      <option>通常のセレクトボックス</option>
      <option>...</option>
    </select>
  </div>
  <div class="my-select">
    <select>
      <option>カスタマイズしたセレクトボックス</option>
      <option>...</option>
    </select>
    <span class="arrow">&#8681;</span>
  </div>
</div>
表示
⇩

カスタマイザブルセレクトボックス

Chrome 134 からは appearance および ::picker(select)に base-select を指定することで、セレクトボックスに画像やリンクや様々なスタイルを埋め込めるようになりました。

CSS
.my-example-3 {
  select, ::picker(select) {
    appearance: base-select;
  }
  option {
    img {
      width: 24px;
      height: 24px;
    }
  }
}
HTML
<div class="my-example-3">
  <select>
    <option><img src="img/japan.png" alt=""> 日本</option>
    <option><img src="img/america.png" alt=""> 米国</option>
    <option><img src="img/germany.png" alt=""> ドイツ</option>
  </select>
</div>
表示

下記の様に <button> と <selectedcontent> を記述することで、選択されたテキストに対するスタイルを指定することもできます。下記の例では <option> に表示する際は注釈を表示し、選択された時点で注釈を非表示にしています。

CSS
.my-example-4 {
  select, ::picker(select) {
    appearance: base-select;
  }
  option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .description {
      font-size: 80%;
      color: #888;
    }
  }
  selectedcontent {
    .description {
      display: none;
    }
  }
}
HTML
<div class="my-example-4">
  <select>
    <button>
      <selectedcontent></selectedcontent>
    </button>
    <option>
      <div class="title">選択肢A</div>
      <div class="description">選択肢Aでは...</div>
    </option>
    <option>
      <div class="title">選択肢B</div>
      <div class="description">選択肢Bでは...</div>
    </option>
  </select>
</div>
表示

関連項目

display

リンク

Copyright (C) 2022-2025 杜甫々
初版：2022年2月27日、最終更新：2025年3月16日
https://www.tohoho-web.com/css/prop/appearance.htm