JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<div>
  <label>
    <span>Тип number с отключенными стрелками:</span>
    <input type="number" pattern=[5-9] step="0.005" min="-50" max="50" id="without-arrows" name="without-arrows" value="0.007" />
  </label>

  <label>
    <span>Тип number с включенными стрелками:</span>
    <input type="number" step="0.005" min="-50" max="50" id="with-arrows" name="with-arrows" value="0.007" />
  </label>

  <label>
    <span>Обычный input:</span>
    <input step="0.005" pattern=[0-9] min="-50" max="50" value="0.007" />
  </label>
</div>

CSS

div {
  width: 300px;
}

label {
  width: 100%;
  display: block;
  margin-bottom: 25px;
}

input {
  width: 100%;
  flex-grow: 1;
  min-width: 0;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  outline: none;
}

input#without-arrows {
  -moz-appearance: textfield;
}

input#without-arrows:hover,
input#without-arrows:focus {
  -moz-appearance: number-input;
}

input#without-arrows::-webkit-outer-spin-button,
input#without-arrows::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}