How Can I Force Visibility of Up/Down Buttons for Number Input Fields in All Browsers?

Can You Enforce Visibility of Up/Down Buttons for Number Input Fields?

Wanting to ever-present up and down arrows on a numerical input field? You may have encountered some hurdles; here's a solution:

HTML:

<code class="html"><input type="number" /></code>

CSS:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: "Always Show Up/Down Arrows";
}</code>

Unfortunately, this method is limited to Chrome.

Alternative Solution: Opacity Property

For a cross-browser solution, try this:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}</code>

This method forces the arrows to remain visible, but note that it may not work in all browsers. Consider implementing a fallback for non-compliant browsers.

The above is the detailed content of How Can I Force Visibility of Up/Down Buttons for Number Input Fields in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!