Hide number input spinners using CSS

HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers.

On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows.

Obviously you want to put them back on focus since they are meant to be there by default.

// Webkit:
// Hide number picker 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 

// Show number picker on focus 
input[type=number]:focus::-webkit-inner-spin-button, 
input[type=number]:focus::-webkit-outer-spin-button, 
input[type=number]:hover::-webkit-inner-spin-button, 
input[type=number]:hover::-webkit-outer-spin-button { 
    -webkit-appearance: inner-spin-button; 
    margin: 0 2px 0 0 ; 
} 

// Firefox: 
// Hide number picker 
input[type=number] { 
    -moz-appearance:textfield; 
} 

// Show number picker on focus 
input[type=number]:focus, 
input[type=number]:hover { 
    -moz-appearance:number-input; 
}