Как сделать в поле с типом number отстут от стрелок?

Question

При задании padding двигаются в месте со стрелками

input {
  text-align: right;
  padding: 0 10px;
}

<input type="number" value="1000">

Answer 1

.edit-wrapper {
  max-width: 80px;
  position: relative;
}

.edit-wrapper input[type=number] {
  width: 100%;
  text-align: right;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

.edit-wrapper input[type=number]::-webkit-outer-spin-button,
.edit-wrapper input[type=number]::-webkit-inner-spin-button {
  margin-left: 20px;
}

.edit-wrapper input[type=number]::-moz-outer-spin-button,
.edit-wrapper input[type=number]::-moz-inner-spin-button {
  margin-left: 20px;
}

.edit-wrapper:before {
    content: '';
    position: absolute;
    right: 20px;
    top: 1px;
}
.edit-wrapper input[type=number] {
  color: transparent;
  text-align: left;
}
.edit-wrapper input[type=text] {
  width: 100%;
  background: transparent;
  pointer-events: none;
  max-width: 80px;
  height: 100%;
  border: 0;
  padding-right: 33px;
  text-align: right;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="edit-wrapper">
  <input type="number" min="0" max="9999" value="1000" oninit="onchange="this.nextElementSibling.value = this.value"" onchange="this.nextElementSibling.value = this.value">
  <input type="text"  min="0" max="9999" value="1000">
</div>

БЛОГ НА HUSL

Как сделать в поле с типом number отстут от стрелок?

Ответы (1 шт):