Pretty Radio Buttons with CSS in APEX

Blog Index

	I occasionally work a bit in Oracle's Application Express (APEX).  I recently wanted to modify the display of a set of standard APEX radio buttons. By default, APEX Radio Buttons look like this when arranged horizontally:   How can we modify the Radio Group object to look like this?   The answer rests in the use of CSS classes in APEX. To begin, we will create a bit of CSS on the page.  If desired, we could then move it to the page template, or even upload it as a cascading style sheet into the APEX shared components for repeated use with any application.
1.	Create a Radio Group object with these characteristics: Display Orientation Horizontal Number of Radio Columns 99 List of values definition Select style as display_value, style as return_value from (Select 'Car' as style, 1 as mysort from dual union Select 'Pickup' as style, 2 as mysort from dual union Select 'MiniVan' as style, 3 as mysort from dual union Select 'SUV' as style, 4 as mysort from dual) order by mysort Default value Car
2.	Run the page to view the very mundane results.
3.	Edit the page, and click on any of the links in the Page zone (such as HTML Header).
4.	From the toolbar at the top of the screen click the CSS tab.
5.	Add this code into the Inline area and click Apply Changes. .rg {   background: #FFFF00; } .rg label {   background: #cccccc;   color: green;   font-weight: bold } When the rg class is assigned to an object, this will place a yellow background field behind all radio buttons.  The button labels will be displayed with green text on a grey background.
6.	Edit the radio group object created earlier.
7.	In the Element section, for the HTML Form Element CSS Classes field, type rg (without the leading period), and click Apply Changes.
8.	Run the page to see the results: Of course, this is a rather obnoxious combination of colors that we wouldn’t really use, but we're just experimenting with object definitions and positioning right now. What happens if we create and use other CSS classes with conflicting characteristics?
9.	Return to the CSS for the page and add this new rg-gray class in the Inline area, after the rg class. .rg-gray {   background: #0000FF; } .rg-gray label {   color: red; }
10.	Return to the radio group and add rg-gray to the HTML Form Element CSS Classes field, with a space between the two CSS class names.
11.	Run the page and view the results: Notice that the background color behind the labels is still a light gray. Characteristcs specified in multiple CSS classes are cumulative.  A style feature will be retained unless it is specifically changed by a later CSS class reference.  Important Note: The order of the CSS classes in the HTML Form Element CSS Classes field (i.e. rg-gray  rg instead of rg  rg-gray) is irrelevant.  It is the order of the CSS classes in the CSS code that controls which features take precedence over others.  If the rg class was listed after the rg-gray class in the CSS code, the features specified in the rg class would override any of the same features specified in the rg-gray class.  "Last one in wins." This feature allows us to set up a default CSS class stored in the Shared Components, a second CSS class in the Page Template, and yet a third CSS class in the page's inline CSS as we did here, and go from more general to more specific in the implementation of CSS classes for our objects.  The CSS in the shared components is evaluated first, followed by the CSS in the page template, followed by the CSS on the page itself. Now that we've learned a bit about CSS classes, and have seen a couple of the basic styles that can be included, let's remove these garish colors and create something pretty.
12.	Return to the CSS and remove all of the class information added earlier.
13.	Add this new CSS class family named rgbtn in the CSS code: .rgbtn { } .rgbtn label {   font-family:Arial;   font-weight: bold;   font-size:12px;   background: #CCCCCC;   /* Light gray background */   color: #000000;   /* Black font color */ } .rgbtn input[type="radio"]:checked + label {   background: #222222; /* Dark gray background */   color:#F9F9F9;  /* Nearly white font */ }
14.	Edit the radio group, remove any values in the HTML Form Element CSS Classes field, and instead refer only to the rgbtn CSS class.
15.	Run the page and view the results.
16.	Let's make the field names look like buttons by rounding the corners, and also provide a bit of padding around the text.  Add these two CSS style caracteristics to the CSS code in the .rgbtn label class, then view the results: padding:3px 10px;   /* 3 pixels top and bottom, 10 pixels left and right */ border-radius:3px; In the sample shown at the beginning of this chapter, we saw that the circles had been removed, leaving just buttons.  Well guess what?  It is very difficult to remove those circles from a radio button.  But luckily, we don't have to remove them at all.  Instead, we can simply slide the labels a few pixels to the left and hide those circles behind their labels!
17.	Add this CSS code in the .rgbtn label class, then view the results: position: relative left: -21px;   There is a bit too much empty space (25px) between the buttons.  Let's slide them a bit closer together.
18.	Add this CSS code in the .rgbtn label class, then view the results: margin-right: -18px;  /* Remove 18 pixels of space between each button */   This concludes our "generic" version of a radio group turned into buttons.  Any radio group that refers to the rgbtn CSS class will be displayed with these characteristics. Now let's create a subsequent CSS class that will display these "buttons" with a specific gradient background.
19.	Create this new CSS class family (rgbtn-gray) in the CSS code: .rgbtn-gray { } .rgbtn-gray label {   background: linear-gradient(#DDDDDD, #888888);   color: #111111; } .rgbtn-gray input[type="radio"]:checked + label {     background: linear-gradient(#888888, #333333);     color:#F9F9F9; }
20.	Add the rgbtn-gray class to the HTML Form Element CSS Classes fieldfor the radio group.
21.	View the results: And now we have created a very nice looking set of gradient, clickable buttons in place of the standard radio buttons with circles.