CSSでフォーム関連のデフォルトのスタイルを削除する方法（appearance）

仙台・宮城の皆さんこんにちは！

今日は、フォーム関連のデフォルトのスタイルを削除する方法を解説します。

フォームで使用するinputやtextareaには、ブラウザやデバイスの「デフォルトスタイル」が適用されます。

そのためブラウザやデバイスによって違う見た目になってしまいます。
具体的には、ボーダーがついたり、角丸になってしまったりなど、普段使わないブラウザで確認すると「なんだこれ？」という経験はありませんか？

デフォルトスタイルを一括で削除する

デフォルトスタイルを取り除きたいという時に便利なのがappearanceというプロパティで、以下のように記述することで削除されます。

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

一旦削除した上で、新しいスタイルを記述することで、ブラウザやディバイスに関係なく見た目を統一できることになります。

/*一旦リセットして*/
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*新しいスタイルを記述*/
input {
  border:1px solid #CCCCCC;
}

まとめ

いかがでしたか？今回解説したappearanceをリセット関連のCSSとセットにしておくと忘れずに記述できて、便利かもしれません！

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！