フォーム(数字)の隙間をなくしたい

Question

#やりたい事

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

を使用した際、以下のように、ホバー時に矢印がでますが、
ホバー前は矢印の幅の余計な隙間をなくしたい。

disable時は、別の質問にて、
以下のcssで対応する事ができました。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

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

Answer 1

ちょっと質問者様のご希望がよく分かりませんが、
↓こういうことですかね？？

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display:none;
  margin: 0;
}

input:hover::-webkit-outer-spin-button,
input:focus::-webkit-outer-spin-button,
input:hover::-webkit-inner-spin-button,
input:focus::-webkit-inner-spin-button {
  display:block;
  margin: 0 0 0 3px;
}

Comments

[Tatsurou]

ご回答いただきありがとうございます！
確認次第、改めてご連絡いたします。