CSS - appearance

• トップ
• CSSリファレンス
• appearance

概要

説明

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

none

セレクトボックスの右側に表示される下向き矢印、チェックボックス、ラジオボタンなどを非表示にします。

auto

ブラウザのデザインにまかせます。

base

まだあまりサポートされていません。

<compat-auto>

それぞれのウィジェットの表示となります。

base-select

Chrome 134 でサポートされました。詳細は下記の カスタマイザブルセレクトボックス を参照してください。

使用例

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

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

.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: "✔";
    }
  }
}

<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 で無効化し、標準の選択矢印が表示されないようにし、独自デザインの矢印を表示しています。

.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;
    }
  }
}

<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 を指定することで、セレクトボックスに画像やリンクや様々なスタイルを埋め込めるようになりました。

.my-example-3 {
  select, ::picker(select) {
    appearance: base-select;
  }
  option {
    img {
      width: 24px;
      height: 24px;
    }
  }
}

<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> に表示する際は注釈を表示し、選択された時点で注釈を非表示にしています。

.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;
    }
  }
}

<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>

関連項目

リンク

• https://drafts.csswg.org/css-ui/#appearance-switching
• https://developer.mozilla.org/ja/docs/Web/CSS/appearance
• https://caniuse.com/?search=appearance