フォームの隙間をなくしたい

#困っていること


フォームに、
<input type="number">

を使用すると、
例え、disableにしても、
矢印分のスペースが右側にできてしまう為、困っています。

実際には、1234567890123と入力しています。
ですので、123が表示されていない状態です。

disable時以外は、矢印が出て欲しいです。

#試したこと
-webkit-appearance: none; で、矢印を消してみた。
→　余白は残ったまま

#環境
OS：　Mac
ブラウザ：　Chrome Safari

どなたかお分かりになる方がいらっしゃいましたら、
ご教授いただけると幸いです。

m.ts10806

2020/12/07 10:05

確認した・対応ブラウザを挙げられた方が良いです。

Tatsurou

2020/12/08 01:01

失礼しました。 Mac Chrome Safari で確認しました。

m.ts10806

2020/12/08 01:02

質問編集して追記してください

Tatsurou

2020/12/08 01:23

かしこまりました。

行動規範の内容に同意します

回答2件

ベストアンサー

下記コードがw3schools.comで紹介されています。

css
1/* Chrome, Safari, Edge, Opera */
2input::-webkit-outer-spin-button,
3input::-webkit-inner-spin-button {
4  -webkit-appearance: none;
5  margin: 0;
6}
7
8/* Firefox */
9input[type=number] {
10  -moz-appearance: textfield;
11}

投稿2020/12/07 09:57

cerfweb

総合スコア1907

Tatsurou

2020/12/08 01:13

ご回答頂きありがとうございます！　解決いたしました。以下のようにdisabled,をつけると、入力時にはちゃんと矢印が出る事を確認できました。大変、助かりました。ありがとうございます。 input::-webkit-outer-spin-button:disabled, input::-webkit-inner-spin-button:disabled {

Tatsurou

2020/12/08 01:29

disabledの時だけ、隙間をなくす事は可能でしょうか。頂いた記述にdisabledをつけてもダメでした。。引き続き、確認をしていきます。

Tatsurou

2020/12/08 01:31

失礼しました。既に対応できておりました。

行動規範の内容に同意します

これでいかがでしょう

css
1/* Chrome, Safari, edge */
2input[type="number"]::-webkit-outer-spin-button, 
3input[type="number"]::-webkit-inner-spin-button { 
4  -webkit-appearance: none; 
5  margin: 0; 
6}
7/* Firefox, IE  */
8input[type="number"] { 
9  -moz-appearance:textfield; 
10}