Color for Radio buttons

[Rune]

I have changed the color for all form fields in some forms that I'm working with to #336699. It works fine for text fields, textareas and menus. For radio buttons it works in Firefox, but not in Internet Explorer. I need this to work in Internet Explorer too, else it looks kinda stupid.

You can test it in both browsers on Live URL here:
http://web.fylkesbanken.sf.no/Portalskjema_css/ring_meg_skjema.php

And download the source files here:
http://web.fylkesbanken.sf.no/Portalskjema_css/Portalskjema_css.zip

Ther's also a bug in CSS Form Builder for the Radio Gruop, State section. If you change something here, the changes are gone when you come back. To prevent that from happen every time I use the tool, I have too place some of the styles in a separate file called mycss.css

Thanks

Regards
Rune

[SOJO web]

Rune,

When you say the color was changed for the radio buttons - do you mean the selected state or are you just referring to the outline?

On Firefox on the mac, it uses the Mac stye buttons which don't have any additional style added to them. Also, the outlines of all the fields including radio buttons are just standard.

On my firefox in IE, it shows a green dot for the selection. This time, though, not only is the input text colored, but so is are the outlines in the form.

On Internet Explorer, the radio buttons and all fields shows the standard black outlines, the radio dot selector is also standard black, but the text in the input fields is the light blue.

It sounds like there is something amiss with a style sheet.

Best regards,

Brian

[Rune]

I have changed the color for all radio buttons incidence in the style sheet like this:


form.SSFKundeportal_Basic input.formRadioField_Standard {
color:#336699;
background-color:#FFFFFF;
}

form.SSFKundeportal_Basic .radioValidState input, form.SSFKundeportal_Basic input.radioValidState {
color:#336699;
background-color:#FFFFFF;
}

form.SSFKundeportal_Basic input.radioRequiredState, form.SSFKundeportal_Basic .radioRequiredState input,
form.SSFKundeportal_Basic input.radioInvalidState, form.SSFKundeportal_Basic .radioInvalidState input {
color:#336699;
background-color:#FFFFFF;
}

form.SSFKundeportal_Basic .radioFocusState input, form.SSFKundeportal_Basic input.radioFocusState {
color:#336699;
background-color:#FFFFFF;
}


form.SSFKundeportal_Basic span.radioFieldGroup_Wide {
color:#336699;
background-color:#FFFFFF;
}

form.SSFKundeportal_Basic span.radioFieldGroup_OneColumn {
color:#336699;
background-color:#FFFFFF;
}
form.SSFKundeportal_Basic span.radioGroup_Narrow {
color:#336699;
background-color:#FFFFFF;

}

form.SSFKundeportal_Basic span.radioGroup_Wide {
color:#336699;
background-color:#FFFFFF;
}

form.SSFKundeportal_Basic span.radioGroup_OneColumn {
color:#336699;
background-color:#FFFFFF;
}

[Jason Byrnes]

change:
form.SSFKundeportal_Basic label.radioSublabel_Wide {
font-weight:normal;
}



to:
form.SSFKundeportal_Basic label.radioSublabel_Wide {
font-weight:normal;
color:#336699;
background-color:#FFFFFF;
}

[Rune]

This change the radio sublabel from black to light blue. That's not what I want. I want the radio buttons to have a light blue dot for the selection. Please check the URL in my first post in both Firefox and Internet Explorer. As you see, it's working in Firefox, but not in Internet Explorer.

Thanks again.

Regards
Rune

[Jason Byrnes]

When I check the URL you posted in Fire Fox, the radio buttons have a black instead of light blue dot.

Changing the color of the dot in a radio button is not a supprted CSS Property. To accomplish that will require the use of images and ajax scripting.

here is a link to an article that has an example of how it can be done:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_i nputs_styled_css_jquery/

[Rune]

Thanks Jason. I'll try it.

Rgards
Rune