Forms With Style

Select Boxes

Next in this tutorial: Fieldset, Legend, Label

Another example of heavily stylized form elements, this time a pull-down select box.

#select {
	padding: 2px;
	background-color: #fed;
	border: 3px ridge #643;
	font-size: 14pt;	
}
#select:focus, #select:active{ outline:0; }
#select:first-letter{ text-decoration: underline; }

option{ font-size: 14pt; }
option:focus{ border:0; outline:0; }
option:hover{ background-color: #000; }

#fruitPicker{
	color: #030;
	backgound-color: #dfd;
	text-align: center;
	font-family: skia, arial, trebuchet MS;
}
.optgroup1 {
	color: #311;
	background-color: #fed;
	background-image: url(img/bartlett-pear.gif);
	background-repeat: no-repeat;
	background-position: center center;
	border: 0;
	font-size: 14pt;	
}
.optgroup2 { 
	color: #030;
	background-color: #efe;
	background-image: url(img/kiwi-half-2.gif);
	background-repeat: no-repeat;
	background-position: center center;
	border: 0;
	font-size: 14pt;	
}
.optgroup3 {
	color: #221;
	background-color: #ffc;
	background-image: url(img/orange-halves.gif);
	background-repeat: no-repeat;
	background-position: center center;
	border: 0;
	font-size: 14pt;	
}

AnimTree

Tabs

GlideMenus

DragLib

Forms With Style

Select Boxes

Setting Style with JS

Tags

Archived Scripts