css - change the appearance of input type number -

i tried code nothing happened. need change arrows image rotate not.

<style> input[type=number] {     height: 30px;     line-height: 30px;     font-size: 16px;     padding: 0 8px; } input[type=number]::-webkit-inner-spin-button {      -webkit-appearance: none;     cursor:pointer;     display:block;     width:8px;     color: #333;     text-align:center;     position:relative; }     input[type=number]:hover::-webkit-inner-spin-button {      background: #eee url('http://i.stack.imgur.com/yyyso.png') no-repeat 50% 50%;       width: 14px;     height: 14px;     padding: 4px;     position: relative;     right: 4px;     border-radius: 28px; } </style>  <input type="number" value="0"> 

http://i.stack.imgur.com/yyyso.png

http://jsfiddle.net/josefelipe87/wf0w0dhw/

different code different browser in css

for mozila

    input[type=number] {        -moz-appearance: textfield;       appearance: textfield;       margin: 0;      } 

for chrome

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