【随時更新】HTML・CSSのinputタグやbuttonタグのデフォルトStyle・CSSを消す方法まとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、HTML・CSSのinputタグやbuttonタグのデフォルトStyle・CSSを消す方法についてまとめて解説していきます。

inputタグやbuttonタグのデフォルトStyle・CSSを消す方法まとめ

buttonタグのデフォルトStyle・CSSを消す方法

buttonタグのデフォルトStyleを消すには、次のようなCSSが使えます。

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

inputタグのtype="button" も同じCSSで、DefaultのStyleを無効化できます。

input[type="button"] {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

数値 inptu(type=number) の矢印ボタンを消す方法

inputタグのtype="number"の矢印ボタンを消すには、次のようなCSSが使えます。

各ブラウザに合わせたスタイルを追加する必要があるので、注意です。

Chrome、Safariの場合

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

FireFox，IEの場合

input[type="number"] { 
  -moz-appearance:textfield; 
} 

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法