Colorful Web Forms

Form

Text Field:

Select List:

Text Area:

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.

Link
http://apex-notes.blogspot.com/2007/12/colorful-web-forms.html

Script

<script type="text/css">

input.tfCamp {
font-size: 10px;
color: #000000;
background-color: #E6FF97;
padding: 2px;
border: 1px solid #C0C0C0;
margin-right: 5px;
margin-bottom: 5px;
height: 20px
}

input:hover.tfCamp {
background-color: #FFFFCC;
border: 1px solid #81AD00;
color: #000000; cursor: pointer}

input:focus.tfCamp {
color: #FFFFFF;
background-color: #81AD00;
border: solid 1px #006600;
cursor: text;
}

textarea.taCamp {
font-size: 11px;
color: #000000;
background-color: #E6FF97;
padding: 2px;
border: 1px solid #C0C0C0;
margin-right: 5px;
margin-bottom: 5px;
}

textarea:hover.taCamp {
background-color: #FFFFCC;
border: 1px solid #81AD00;
color: #000000;
cursor: pointer;
}

textarea:focus.taCamp {
color: #FFFFFF;
background-color: #81AD00;
border: solid 1px #006600;
cursor: text;
}

select.slCamp {
font-size: 10px;
color: #000000;
background-color: #E6FF97;
padding: 2px;
border: 1px solid #C0C0C0;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
select:hover.slCamp {
color: #000000;
background-color: #FFFFCC;
border: 1px solid #81AD00;
}

select:focus.slCamp {
color: #FFFFFF;
background-color: #81AD00;
border: solid 1px #C0C0C0;
}

</style>

APEX_PUBLIC_USER