I found many ways to customize a html input number, e.g.
<input name="tgTxt" type="number" value="36.5" max="37" step="0.5" style="width: 160px;">with non pure CSS.
Is there a way to customize in pure CSS(no jQuery, etc.) the “+” and “-” buttons, so that:
-
I can make the minus appear to left of the number and the plus to
its right? -
I can customize the font-size and background-color of the minus button
independently from the plus button?
So I wish in pure CSS, the minus button to left with a blue background and white font, while the plus button to the right with a red background and white font.
I can do it with other methods, but I’m wondering if it’s possible just with input type number.
3
Simply you cannot.
Controls are not style-able cross-browser. The most simple way to do this is use <button> on both sides with + – signs and use a little bit of JavaScript. This will cover the cross-browser compatibility.
Here is an small example. Use CSS to style it the way you want.
/* function take argument how much to add / subtract from current value */
function adjustValue(value) {
const input = document.getElementById('custom-input');
input.value = Number(input.value) + value;
}/* removes the default native browser controls */
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}<button onclick="adjustValue(-0.5)">-</button>
<input id="custom-input" type="number" />
<button onclick="adjustValue(0.5)">+</button>1