CODEWITHSUNDEEP
htmlforms
Oskar Szura
Oskar Szura

Reputation: 2569

HTML5 number field arrows customization

Can I customize 

<input type='number'>

field to show all the time it's arrows? By default it's hidden till the field is has no focus. Below is what I'm talking about.

enter image description here

Upvotes: 1

Views: 5874

Answers (3)

int32_t
int32_t

Reputation: 6150

Firefox and IE don't have such behavior. So, I assume you are working with Google Chrome.

input::-webkit-inner-spin-button {
    opacity: 1;
}

FYI. UA stylesheet has the following:

input::-webkit-inner-spin-button {
    ...
    opacity: 0;
    pointer-events: none;
}

input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    opacity: 1;
    pointer-events: auto;
}

html.css

Upvotes: 2

imbondbaby
imbondbaby

Reputation: 6411

Only way that I can think of is... Having two buttons for incrementing and decrementing your input and using JS. You won't be using type="number" here since the JS will be incrementing and decrementing the number for you.

Here is an example, as mentioned here:

CSS:

.spin {
    display: inline-block;
}
.spin span {
    display: inline-block;
    width: 20px;
    height: 22px;
    text-align: center;
    padding-top: 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.spin span:first-child {
    border-radius: 4px 0 0 4px;
}
.spin input {
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: bold;
}

JS:

var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
    var spin = spins[i],
        span = spin.getElementsByTagName("span"),
        input = spin.getElementsByTagName("input")[0];

    input.onchange = function() { input.value = +input.value || 0; };
    span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
    span[1].onclick = function() { input.value -= -1; };
}

Note: Change background: #fff; to change the arrow colors. There are other neat examples available on the web as well!

Demo

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

The UI and behavior of <input type='number'>, as well as all the other HTML5 input types (e.g., type='date', etc), is browser and/or system dependent. To make the arrows always visible, you'd need to use a custom JS solution.

Upvotes: 1

Related Questions