Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8586

のスポンボタン(上下の矢印ボタン)をCSSで非表示にする

$
0
0

スクリーンショット 2020-09-02 18.15.30.png
この矢印のやつを消す方法です。

Chrome, Safari

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

FireFox, IE

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

CSSのクラスを指定して、Chrome, Safari, FireFox, IE まとめて書く

CSS
.no-spin::-webkit-inner-spin-button,.no-spin::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;-moz-appearance:textfield;}
HTML
<inputtype="number"class="no-spin">

CSSのクラスを指定して、!importantで最優先にしてまとめて書く

CSS
.no-spin::-webkit-inner-spin-button,.no-spin::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;-moz-appearance:textfield!important;}

スクリーンショット 2020-09-02 18.17.15.png
消えました!

参考URL:

数字のみを入力できるフォーム(テキストボックス)を作成する
HTML5入力タイプの数値矢印をCSSクラスで非表示にしますか?
INPUTタグ type numberの時に表示される矢印ボタン(スピンボタン)を消す方法
とほほのWWW入門 > CSS - !important


Viewing all articles
Browse latest Browse all 8586

Trending Articles