Oracle Apex Notebook

Colorful web forms

Written by Paulo Vale on Monday, December 17, 2007

Web forms can be beautified using style sheets. Colors, borders, cursors, text style and other style properties can be changed.

Here is an example. How to do it?

First you will need to add to your template CSS file the following script, or just past it under Page Properties > Header and Footer > Header Text:

<script type="text/css"><br />input.tfCamp {<br /> font-size: 10px;<br /> color: #000000;<br /> background-color: #E6FF97;<br /> padding: 2px;<br /> border: 1px solid #C0C0C0;<br /> margin-right: 5px;<br /> margin-bottom: 5px;<br /> height: 20px<br />}<br />input:hover.tfCamp {<br /> background-color: #FFFFCC;<br /> border: 1px solid #81AD00;<br /> color: #000000; cursor: pointer<br />}<br />input:focus.tfCamp {<br /> color: #FFFFFF;<br /> background-color: #81AD00;<br /> border: solid 1px #006600;<br /> cursor: text;<br />}<br /></style>
You need to create a style for each item type. This example refers only to Text Items, however if you follow the link to test example, you also have examples to Select Lists and Text Areas items.

Now you can reference your style in the "HTML Form Element Attributes" section under the item properties (in this case for Text Fields) like this:

class="tfCamp"

Note: This is 100% compatible with firefox. Internet Explorer unfortunately doesn't handle the hover and focus effect in form fields, all other functionalities work how expected.