Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Radio button background image

Radio button background image

Problem

I have given bg image for radio button. It is working in chrome but not in mozilla.

Here is my code

 

CSS is

.fieldlist input[type="radio"] {
    float: right;
    -webkit-appearance: none;
    border: none;
    width: 25px;
    height: 25px;
    background: url(images/radio.png) left center no-repeat;    
    background-size: 20px; 
}
.fieldlist input[type="radio"]:checked {
    background: url(images/radio_checked.png) left center no-repeat;

}
Problem courtesy of: Sowmya

Solution

Write like this:

CSS:

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

input[type="radio"] + label
{
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

HTML


Read this article for more http://css-tricks.com/the-checkbox-hack/

Solution courtesy of: sandeep

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Radio button background image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×