замена кнопок в поле input type=number

Вот такой вопрос мучает: Как сделать кнопки для поля типа number, чтобы при наведении на каждую из них выделялась соответствующая?

Пробовал вот так:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
background:url(../images/bg/counter_key.png) no-repeat center center;
width:17px; height:16px; margin: 0px; padding-right: 2px;
}
input[type=number]::-webkit-inner-spin-button:hover{
-webkit-appearance: none;
background:url(../images/bg/counter_key.png) no-repeat right center;
}
input[type=number]::-webkit-outer-spin-button:hover{
-webkit-appearance: none;
background:url(../images/bg/counter_key.png) no-repeat left center;
}

Но при наведении на любую меняется только верхняя. Подскажите кто-нибудь, что я неправильно делаю? Второй день выворачиваю инет, но ответа не нахожу.

Всё. Отбой. Сделал по-другому.