Radio Button Images in FireFox 6.0

[mpaparella]

I am getting big round circles instead of my custom images for my radio buttons in FireFox V.6. I need to use custom images because my understanding is that firefox doesn’t support background colors on radio/checkboxes. Below is the css i am working with… modifying existing, you can see the safari version is there, and working. Is there any cause for override?

CODE:

Yes

CSS:
/* Webkit browsers (Safari/Chrome) */
@media screen and (-webkit-min-device-pixel-ratio:0){

.csd_box_is_valid input[class=csd_radiobuttonlist]:disabled:checked
{
background: url(../images/radiobutton_sprite.png) no-repeat 0px -80px;
}
.csd_box_is_valid input[class=csd_radiobuttonlist]:disabled
{
background: url(../images/radiobutton_sprite.png) no-repeat 0px -100px;
}

.csd_box_is_invalid input[class=csd_radiobuttonlist]:checked
{
background: url(../images/radiobutton_sprite.png) no-repeat 0px -40px;
}
.csd_box_is_invalid input[class=csd_radiobuttonlist]
{
background: url(../images/radiobutton_sprite.png) #FFC no-repeat 0px -60px;
}

.csd_box_is_valid input[class=csd_radiobuttonlist]:checked
{
background: url(../images/radiobutton_sprite.png) no-repeat 0px 0px;
}
.csd_box_is_valid input[class=csd_radiobuttonlist]
{
background: url(../images/radiobutton_sprite.png) no-repeat 0px -20px;
}

.csd_box_is_invalid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_invalid input[class=csd_radiobuttonlist],
.csd_box_is_valid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_valid input[class=csd_radiobuttonlist]
{
height: 20px;
width: 20px;
}

.csd_box_is_invalid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_invalid input[class=csd_radiobuttonlist],
.csd_box_is_valid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_valid input[class=csd_radiobuttonlist]
{
-khtml-appearance: none;
-webkit-background-clip: padding-box; /* Safari, Chrome */
background-clip: padding;
}
}
/* Firefox (Mozilla) */
@-moz-document url-prefix()
{

.csd_box_is_invalid input[class=csd_radiobuttonlist]:focus
{
-moz-border-image: url(../images/rb_invalid_focus.png) 0 / 0px;
}
.csd_box_is_invalid input[class=csd_radiobuttonlist]
{
-moz-border-image: url(../images/rb_invalid.png) 0 / 0px;
-moz-appearance: none !important;
/* -moz-background-clip: content; Firefox 1.0-3.6 */
/* background-clip: content-box; Firefox 4.0+, Opera */
height: 20px !important;
width: 20px !important;
}

.csd_box_is_invalid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_valid input[class=csd_radiobuttonlist]:checked,
.csd_box_is_valid input[class=csd_radiobuttonlist]
{
-moz-border-image: url() 0 0 0 0;
-moz-appearance: radio !important;
}
}

[Author]

Posts