CODEWITHSUNDEEP
javascriptjquerycsshtml
CroaToa
CroaToa

Reputation: 910

Custom spinners input type number without js

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

enter image description here How can I do that without js? or js needed here?

Upvotes: 4

Views: 10198

Answers (3)

Hitesh Ramola
Hitesh Ramola

Reputation: 340

I think this is a better version of the code by @AmanVirdi if you want no negative numbers and number not greater than 100.

For more than 100 just tweak the condition if(value > 99) for as much as you want.

function updateSpinner(obj)
{
    var contentObj = document.getElementById("content");
    var value = parseInt(contentObj.value);

    if(isNaN(value)){
            contentObj.value=0;
            return;
        }
    else{
    if(obj.id == "down" && value >= 1) {
        value--;
    } else if(obj.id == "up"){
        if(value > 99){alert("Max Value Reached"); contentObj.value=100; return;}
        value++;
    }
   }
    contentObj.value = value;
}

Upvotes: 0

abrosis
abrosis

Reputation: 414

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.

Upvotes: 4

AmanVirdi
AmanVirdi

Reputation: 1685

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.

Upvotes: 5

Related Questions