＜option style="background-color: #ff33cc"＞sina.com＜/option＞
＜option style="background-color: #999999"＞sohu.com＜/option＞
＜/select＞
多行文本框的背景是一个图像，代码：
＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞
submit1按钮的背景是黄色的，代码：
＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞
submit2按钮的背景是一个图像，代码：
＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞
小结：用好background-color属性和background-image属性，就可以设计很出“色”表单了。
- 文本框有8种类型边框样式，即border-style，分别展示在本例中，
边框宽度的设置有一个规律：
border-width: [ thin | medium | thick | ＜长度＞ ]{1,4}
边框宽度用一到四个值来设置元素的边框宽度，它们分别被应用于上、右、下和左边框宽度。如果只给出一个值，它被应用于所有边框宽度。如果两个或三个值给出了，省略了的值与对边相等
例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞
边框颜色的设置有一个规律：
border-colr: ＜颜色＞{1,4}
边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了，它们分别被应用于上、右、下和左边框颜色。如果只给出一个值，它被应用于所有边框颜色。如果两个或三个值给出了，省略了的值与对边相等。
- 对于多行文本框以及按钮，设置边框的方法和文本框一样，不再陈述；
- 由于下拉选择框Select不支持边框的设置，所以对它设置是徒劳的；
- 单选按钮和复选按钮的边框，设置的效果不十分协调，所以建议不要对它们设置，不然有“画蛇添足”之感；
样例15：边框的特殊设计展示
聪明的读者一定会想到，如果设计单边框，一定更加漂亮，对！下面我们来尝试以下部分边框的设置效果，本例仅仅以Solid和dotted两种类型的边框作演示，其它类型的边框原理相同：
注意：边框类型的外观如下：
- none ：无边框。与任何指定的border-width值无关；
- dotted ：点线；
- dashed ：虚线；
- solid ：实线边框；
- double ：双线边框。两条单线与其间隔的和等于指定的border-width值；
- groove ：3D凹槽；
- ridge ：边框突起；
- inset ：3D凹边；
- outset ：3D凸边；
- 代替submit按钮的图片代码格式是
＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞
- 代替reset按钮的代码图片格式是
<a href="javascript:document.formName.reset();">＜img border=0 src="..."＞</a>
注：这里的formName是表单的name属性值。
2.2 用背景图美化表单元素
其实，前面已经提到过，用background-image:url()属性来定义表单元素的背景图，这里仅举一例，可以看到，除了select没有效果以外，其它的都可以配合网页的背景来设置它们。
样例18：背景图的设置
