CSS - appearance

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

概要

属性名 appearance
auto | none | textfield | menulist-button | その他
初期値none
適用可能要素全要素
継承継承しない
アニメーション可能

サポート

[サポート状況]

説明

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

説明
auto
none
textfield
menulist-button
その他

使用例

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

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

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

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

関連項目

display

リンク


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