Styling Radio Buttons as Buttons

[nicolaticola]

Hi Support,

I’m trying to make my Radio Buttons into CSS buttons on my product page, but I’m struggling with getting the CSS to work.

Is there another way I should be referring to the x-btn? The code I’m using is below.

input[type="radio"] {
    display:none !important;
}

.attribute_pa_book-type {
    list-style-type:none !important;
    margin:25px 0 0 0 !important;
    padding:0 !important;
}

.vattribute_pa_book-type li {
    float:left !important;
    margin:0 5px 0 0 !important;
}

.attribute_pa_book-type label {
    padding:5px !important;
    cursor:pointer !important;
    -webkit-appearance: x-btn !important;
    /* WebKit */
    -moz-appearance: x-btn !important;
    /* Mozilla */
    -o-appearance: x-btn !important;
    /* Opera */
    -ms-appearance: x-btn !important;
    /* Internet Explorer */
    appearance: x-btn !important;
    /* CSS3 */
}

.attribute_pa_book-type label:hover {
    background:#DDD !important;
}

I’ll add a link to the page in another note.

Thank you, Nicola

[mldarshana]

Hi There,

Thanks for writing in! Your radio buttons are hidden due to the following code.

input[type="radio"] {
    display:none !important;
}

Try following this example to convert is as buttons (http://jsfiddle.net/YB8UW/8/).

Thanks!