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