Стилизовать форму выбора количества

[pingwinec]

Нужно стилизовать форму выбора количества как здесь Для просмотра ссылки Войди или Зарегистрируйся . Видел у Попова на сайте реализацию но там все менее красиво реализовано.

 

[d0ublezer0]

Если речь идет именно о выборе количества (а не вариантов размеров, к примеру) - то там JS используется только для изменения значений. Реально вам достаточно скопировать код сверстанных элементов и стили к ним. Поправить названия полей под свой сайт.
Код:

<div class="qty">
                                                <input value="1" class="text numvalue" name="item_quantity" id="Cart66UserQuantityInput_1">
                                                <ul class="link">
                                                    <li><a class="upbtn"><img width="18" height="15" alt="image" src="http://demo.mintthemes.com/armonico/wp-content/themes/Armonico/css/images/ico-up.gif"></a></li>
                                                    <li><a class="downbtn"><img width="18" height="16" alt="image" src="http://demo.mintthemes.com/armonico/wp-content/themes/Armonico/css/images/ico-down.gif"></a></li>
                                                </ul>
                                            </div>

Стили:

.qty {
    background: url("css/images/bg-qty.gif") no-repeat scroll 0 0 transparent;
    float: left;
    height: 35px;
    margin: 0 10px 0 0;
    padding: 0 0 0 6px;
    width: 54px;
}
.qty .text, #viewCartTable tbody td .qty .text {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #666666;
    float: left;
    font: 12px/15px 'HelveticaNeueBold';
    margin: 9px 0 0;
    padding: 0;
    text-align: center;
    width: 30px;
}
.qty .link, #viewCartTable tbody td .qty .link {
    float: right;
    font-size: 0;
    line-height: 0;
    list-style: none outside none;
    margin: 0;
    padding: 1px;
    width: 18px;
}
.qty .link li, #viewCartTable tbody td .qty .link li {
    padding: 0 0 1px;
}
.qty .link li img, #viewCartTable tbody td .qty .link li img {
    display: block;
}

Ну и картинки потаскать с того сайта.
А дальше только прикрутите на нажатия "кнопок" + и - скрипты, увеличивающие/уменьшающие значение в поле "количество".

Надеюсь, понятно изложил.