DevToolBox

CSS appearance ジェネレーター

フォーム要素のネイティブスタイルをリセット・カスタマイズするためのCSS appearanceプロパティを生成します。

ネイティブスタイルを完全にリセット

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

プレビュー

appearance: none を適用した button 要素

CSS appearanceとは?

CSS appearance プロパティは、フォーム要素(ボタン、入力欄、selectなど)のブラウザネイティブなスタイルを制御します。 特に appearance: none は、 カスタムデザインを適用する際の第一歩として広く使われています。

ベンダープレフィックス(-webkit-、-moz-)は、古いブラウザの互換性のために必要な場合があります。 モダンブラウザでは標準の appearance のみで動作しますが、 広範なサポートを目指す場合は含めることを推奨します。