Create Easy CSS3 Radio Buttons

Ever wondered how to style radio buttons, but without any JavaScript? Thanks to CSS3 you can!

Here is the way !
In this time, we will make a simple question with lists of options.

1. HTML

Your Question ??


                
                
                
                a. Option A
                
            

                
                
                
                b. Option B
                
            

                
                
                
                c. Option C
                
            

                
                
                
                d. Option D
                
            

                
                
                
                e. Option E
                
            

2. CSS

.list_question {
    width: 300px;
    height: auto;
    margin: 0px auto;
    background: #0096F4;
    color: #fff;
    padding: 10px;
    border-radius: 6px 6px 6px 6px;
}
.list_question ul li {
    list-style: decimal;
    background: none;
    padding: 0px;
    margin: 0px;
}
.list_question ul.choices{
    list-style: none;
    margin: 0px;
    margin-left: -35px;
    padding: 0px;
}
.list_question ul.choices li{
    list-style: none;
}
.list_question ul{
    margin: 0px;
}

/* check radio button*/

.radio {
    cursor: pointer;
    display: inline-block;
    font: 15px/41px sans-serif;
    padding-right: 20px;
}
.radio:hover .inner {
    opacity: 0.5;
}
.radio input {
    display: none;
}
.radio input:checked + .outer .inner {
    opacity: 1;
}
.radio .outer {
    background:url("images/check_radio_sheet.png") -38px top no-repeat;
    display: block;
    float: left;
    margin: 10px;
    width:19px;
    height:19px;
}
.radio .inner {
    -moz-transition: opacity 0.5s ease 0s;
    background:url("images/check_radio_sheet.png") -57px top no-repeat;
    border-radius: 20px 20px 20px 20px;
    display: block;
    opacity: 0;
    width:19px;
    height:19px;
}

Here is my image background for radio button:





3. Let's preview the result ! here's mine.

In this post, I also put style transition animation when the cursor hovering on the radio. Once again, it's pure css without any javascript.
Done !

Source :

1. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/