玩转表单之花样表单（2）

　　1.2 背景颜色和图像样式的应用
　　有很多时候，网页由于颜色的搭配，不得不对表单的背景颜色和图像样式进行设计，背景颜色利用background-color属性，背景图像利用background-image属性，颜色和图像同样能够得到意想不到的效果。
　样例13： 表单元素的背景展示

　　分析：

• 文本框背景是黑色的，字体是白色的，代码：
  ＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞

• 口令框背景是灰色的，代码：
  ＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞

• 单选和复选按钮的背景是红色的，代码：
  ＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞
  ＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞

• 下拉选择框的选项是丰富多彩的背景，代码：
  ＜select name="select2" size="1"＞
  ＜option selected style="background-color: #FF0000"＞aspxhome.com＜/option＞
  ＜option style="background-color: #0000CC"＞redidea.com＜/option＞
  ＜option style="background-color: #009900"＞chinabyte.com＜/option＞
  ＜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属性，就可以设计很出“色”表单了。