NO JS - Quantity Control

can be used in emails which have good CSS support

HTML

<div class="wrapper">
    <input id="qty0" type=radio name=quantity value=0 checked/>
    <label for="qty0">1</label>
    <input id="qty1" type=radio name=quantity value=1 />
    <label for="qty1">2</label>
    <input id="qty2" type=radio name=quantity value=2 />
    <label for="qty2">3</label>
    <input id="qty3" type=radio name=quantity value=3 />
    <label for="qty3">4</label>
    <input id="qty4" type=radio name=quantity value=4 />
    <label for="qty4">5</label>
    <input id="qty5" type=radio name=quantity value=5 />
</div>

CSS

.wrapper {
    position:relative;
    margin:0 auto;
    width:180px;
    background-color:#C0C0C0;
    height:54px;
}
label {
    position:absolute;
    left:30px;
    top:10px;
    border-radius:4px;
    font-size:18px;
    padding:6px;
    width:40px;
    visibility:hidden;
    text-align:center;
}
input {
    position:absolute;
    top:10px;
    left:10px;
    visibility:hidden;
}

input:checked~input {
    left:130px;
}
input:checked+label {
    left:60px;
    visibility:visible;
    background-color:#F0F0F0;

}

input:checked~input~input+label {
    display:none;
}
input:after {
    display:inline-block;
    visibility:visible;
    padding: 0 10px 3px 10px;
    border-radius:50%;
    content:"-";
    font-size:24px;
    background-color:#F0FFF0;
}
input:checked:after {
    display:inline-block;
    content:"";
}
input:checked~input:after {
    display:inline-block;
    content:"+";
}
input:checked~input~input:after {
    display:none;
    content:"";
}