Custom spinners input type number without js

Question

I need create input type="number" with custom spinners. It need to be like that

How can I do that without js? or js needed here?

Answer 1

You need to use the javascript/jQuery. You can use jQuery user interface plug in for spinner. Demo.

In case of plugin you need to customize it as required, the arrows can be replaced and relocated by CSS stylings.

Or you can simply try this:

Html:

<a id="down" href="#" onclick="updateSpinner(this);">-</a><input id="content" value="0" type="text" style="width:30px" /><a id="up" href="#"  onclick="updateSpinner(this);">+</a>

CSS:

a
{
    text-decoration: none;
}

JavaScript:

function updateSpinner(obj)
{
    var contentObj = document.getElementById("content");
    var value = parseInt(contentObj.value);
    if(obj.id == "down") {
        value--;
    } else {
        value++;
    }
    contentObj.value = value;
}

I working example can be seen on this fiddle.

Answer 2

You can target the buttons in css using:

input[type="number"]::-webkit-outer-spin-button{}
input[type="number"]::-webkit-inner-spin-button{}

However, trying to achieve the design you wish to achieve might be hard and js might be you best option. The above css, also only works in webkit browsers as well (chrome, safari).

JS would be your safest and most cross browser friendly bet.