Input type number hides the arrows

Question

I have an input of type=number in my page and the arrows aren't shown. The input looks like a normal text input. I think it's because of this:

I use Google CHrome. How can I override these styles?

With your reputation you should know better, post normal code we can play with — Nick, May 25 '16 at 13:20
Possible duplicate of [Can I hide the HTML5 number input’s spin box?](http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) — susanloek, May 25 '16 at 13:52

score 0 · Answer 1 · answered May 25 '16 at 14:36

This will help but in webkit only; you may want to use a custom input element if you really have to change the styling.

https://jsfiddle.net/Volker_E/WwfW9/

input[type="number"] {
    position: relative;
    margin: 0 0 1rem;
    border: 1px solid #BBB;
    border-color: #BBB #ECECEC #ECECEC #BBB;
    padding: .2rem;
}

/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    width: 1em;
    border-left: 1px solid #BBB;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
    box-shadow: 0 0 2px #0CF;
    opacity: .8;
}

/* Override browser form filling */
input:-webkit-autofill {
    background: black;
    color: red;
}

Input type number hides the arrows

1 Answers1