Assorted Collection of web / newsgroup form styling examples

Form Field Focus

Two variations of using .classname:focus - might be a way to indicate required fields. There is a bit of a problem if you click another field without leaving the first.
.foobox { color : #000; background-color : #fff; }
.foobox:focus { color : #000; background-color : #6f0; }
.required { color: #000; background-color: #f00; }
.required:focus { color: #000; background-color: #fff; }

This one uses onFocus="this.className='boxFocus'" onBlur="this.className='boxBlur'" to change class styles
.boxBlur { border: 1 solid #000000; }
.boxFocus { background-color: #CAEEFF; border: 1 solid #000000 }

Yes I have an animated Img Background
Width/Height might be quirky

theFixor's <select>


Image of how it's supposed to look
text-align: right; not working

Form showing how it works in your browser - styles on right

 Using this style class
.buttonover {
font-family: verdana, arial,sans-serif;
font-size: 9pt;
text-align: right;
font-weight: bold;
width: 155px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #9ccece;
border: #004444 4px double;
color: #000000;
}

Example of using optgroup & label to achieve select option naming and grouping
Mileage might vary on this


Styling Option Backgrounds

Apparently works when you use a size="?" to show expanded list - have never seen a collapsed one work yet

Expanded <select> form

Does it look like this?

Results:

 screen shot

IE 5.1.3 Mac - yes
IE 6.0 Win - partial (no border)
Mozilla 1.2b Win - partial (no border)

back to the forms page