Search code examples
javascripthtmlcssinputspinner

HTML input element spinner rendering via CSS

When I change the font-size CSS property of the <input type="number"> element, either directly with CSS or post-element creation via JavaScript, the spinners don't change size in either FireFox or Safari. The input/display box does. So with larger fonts — extremely important for accessibility — the actual spinner buttons are relatively tiny when the font is large.

In FireFox:

enter image description here
versus
enter image description here

According to Mozilla, checking this morning:

There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.

This seems... unreasonable. It also seems unreasonable the spinner size doesn't track the font size in use. I feel like I must be missing something.

Is my only option to completely roll my own spinner?

Solution

  • Turns out that making bigger controls for input[type="number"] is not a cross-browser feature. So one thing that you can do to make it work everywhere is "simulate" the controls.

    1- First hide the native controls

    This can be done simply in CSS like this:

    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

    2- Next add 2 custom buttons with their actions

    (Complete solution)

    const input = document.getElementById("nb-input");
function returnNb(nb) {
  if (nb) return parseFloat(nb);
  else return 0;
}
const increment = () => input.value = (returnNb(input.value) + 1).toString();
const decrement = () => input.value = (returnNb(input.value) - 1).toString();
    input {
  font-size: 34px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.container {
  display: flex;
  width: 200px;
}
.controls {
  display: flex;
  flex-direction: column;
}
.spinner {
  flex: 50%;
}
    <div class="container">
  <input id="nb-input" type="number" />
  <div class="controls">
    <button class="spinner" onclick="increment()">
      <svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
      </svg>
    </button>
    <button class="spinner" onclick="decrement()">
      <svg width="24" height="24" viewBox="0 0 16 16">
        <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
      </svg>
    </button>
  </div>
</div>

    And for sure you can customize the buttons as you desire, you don't have to follow the styles that I've used.

    Regards