通过css实现表单form的美化[精选].docVIP

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title表单form的美化(包括input radio checkbox textarea submit select等一系列)/title meta http-equiv=Content-Type content=text/html; charset=gb2312 / script language=javascript type=text/javascript src=1450_niceforms.js/script style type=text/css * { margin:0; padding:0; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#404040; background:#FFF; } img { border:0; } #container { padding:20px; } /*Forms defaults*/ input, textarea { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#404040; } label { color:#999; cursor:pointer; padding-left:2px; line-height:15px; vertical-align:top; } label.chosen { color:#333; } /*Transparent items*/ .transparent { filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; border:0px solid #FFF; background:#FFF; z-index:10; cursor:pointer; } .transparentFake { background:none; border:none; } .transparent2 { z-index:10; } /*Radio buttons*/ .radioAreaUnchecked, .radioAreaChecked { z-index:5; position:absolute; width:15px; height:15px; cursor:pointer; } .radioAreaUnchecked { background:url(/upload/2007/8/3/1450_radio.gif) no-repeat left top; } .radioAreaChecked { background:url(/upload/2007/8/3/1450_radio.gif) no-repeat left bottom; } /*Checkboxes*/ .checkboxAreaUnchecked, .checkboxAreaChecked { z-index:5; position:absolute; width:14px; height:14px; cursor:pointer; } .checkboxAreaUnchecked { background:url(/upload/2007/8/3/1450_checkbox.gif) no-repeat left top; } .checkboxAreaChecked { background:url(/upload/2007/8/3/1450_checkbox.gif) no-repeat left bottom; } /*Text inputs*/ .textinput, .textinputHovered { width:236px; height:15px; background:url(/upload/2007/8/3/1450_input.gif) no-repeat left top; border:none; padding:4px 8px; } .textinputHovered { background-position:left bottom; } /*Text areas*/ .textarea, .textareaHovered { width