我正在嘗試只用CSS做一個自定義輸入type=number。箭頭應(yīng)該像圖像和輸入需要有一個文本標簽，在這種情況下，用戶點擊箭頭只會增加數(shù)字。 任何想法，如果這是可能的，通過純css？

這是我能找到的最接近的了。更多的數(shù)字會與& quot迪亞斯& quot...

.input {
  width: 100%;
  max-width: 400px;
  color: grey;
  height: 40px;
  border: 1px solid grey;
  border-radius: 4px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: -15px;
}

.plazo {
  position: relative;
  width: 100%;
  max-width: 120px;
  background: #ffffff;
  top: 10px;
  left: 20px;
  z-index: 4;
  color: grey;
}

.number:before {
  content: "días";
  position: absolute;
  left: 55px;
  top: 38px;
  color: grey;
  z-index: 5;
}

.asterix {
  color: red;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
  background: white;
}

.number-wrapper {
  position: relative;
  z-index: 3;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 8px;
  width: 10px;
  height: 10px;
  font-size: 10px;
  pointer-events: none;
  background-color: #ffffff;
}

.number-wrapper:after {
  color: gray;
  content: "\25B2";
  transform: scale(2, 1);
  top: -1px;
}

.number-wrapper:before {
  color: gray;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
  transform: scale(2, 1);
}

<div class="plazo">Plazo de termino<span class="asterix">*</span></div>
<div class="number">
  <span class='number-wrapper'>
    <input type="number" placeholder="60" class="input">
</span>
</div>