Custom Radio Button Widget

[dbradley4u]

I need to create two custom radio buttons, one with a green center and one with a red center. I have created custom panel widgets for the Profound UI before, but I was able to copy the graphic pieces from the Profound UI images folder to get me started. I can't seem to find any radio button graphics or documentation on creating a radio button widget using Profound UI. I would appreciate any help or guidance with this.

Thanks!
Denise

[David]

I think there is not an easy way to accomplish this. PUI's radio button widget uses the browser's built-in radio button control for the widget, which doesn't allow for any styling of the "center" component.

That said, though, can you explain a bit more of what you are trying to accomplish? Maybe we could recommend some alternatives.

[dbradley4u]

We have a page with a list of items that a student may be missing. Each item has multiple radio buttons to indicate whether 1) nothing needs to be done with this item, 2) it is complete, 3) it is incomplete, or 4) nothing has been turned in yet. We would like the first two buttons to show green when they are displayed, to indicate at a glance that these items are okay. The next two buttons should display red to indicate that something more has to be done with these items. After looking through the PUI javascript, it looked as though they were being generated from the code and not from graphics, as some of our other custom widgets are, but I just wasn't sure. If I created a radio button graphic, is there some way that we can add it to our PUI and use it on our pages as a custom widget?

Thanks for your help!
~ Denise

[David]

Yes, as you saw, the radios are not rendered using image files. PUI uses just a standard HTML <input> control with type "radio".

Unfortunately, the browser does not give the capability to style these very much -- for example, you cannot use image files with them at all, nor can you just change the color of the center.

You may have seen "fancy" or "styled" radio buttons out there, but these are actually created using some HTML/CSS "tricks" where some other HTML element (to which you can assign a background image) is used to "wrap" the radio. Then JavaScript code is used to swap out the image on the "wrapper" element when you click on it to check/uncheck the box. For example, like this:

http://ryanfait.com/resources/custom-ch ... o-buttons/

Unfortunatley, though, due to the way the radio is constructed in PUI using just a standard <input> element, it is not currently possible to style them in this way.

We'll take this into consideration and may make some improvements here in the future.

In the meanwhile, maybe some other presentation can be used? Maybe using colored image files or labels?