Styling input[type="number"] Spin-Buttons

by firegroove

HTML

<label for="input-number-mod">Modified Spin-Buttons (just Chrome)</label>

<input id="input-number-mod" class="mod" type="number" value="777" />

<label for="input-number-def">Default Spin-Buttons</label>
<input id="input-number-def" class="def" type="number" />

CSS

/* General Styles */
body {
    margin: 2rem;
    font-family: sans-serif;
}

label {
    display: block;
    font-size: .8rem;
}

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;
}