close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Color for Radio buttons

Thread began 10/14/2009 7:53 am by Rune Brynestad | Last modified 10/15/2009 4:31 pm by Rune Brynestad | 3319 views | 6 replies |

Rune Brynestad

Color for Radio buttons

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:
ring_meg_skjema.php

And download the source files here:
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

Sign in to reply to this post

anonymous

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

Sign in to reply to this post

Rune Brynestad

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;
}

Sign in to reply to this post

Jason ByrnesWebAssist

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;
}

Sign in to reply to this post

Rune Brynestad

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

Sign in to reply to this post

Jason ByrnesWebAssist

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:
accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

Sign in to reply to this post

Rune Brynestad

Thanks Jason. I'll try it.

Rgards
Rune

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...