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

DefaultStyle

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

今回は、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!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿