通过css实现表单form的美化

来源：网络收集时间：2025-09-20

导读：通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title表单form的美

通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>表单form的美化(包括input radio checkbox textarea submit select等一系列)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

* {

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*/

通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。

.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;

}

通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。

.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:336px;

height:125px;

background:url(/upload/2007/8/3/1450_textarea.gif) no-repeat left top; border:none;

padding:4px 8px;

}

.textareaHovered {

background-position:left bottom;

}

/*Selects*/

.selectArea {

width:200px;

height:21px;

background:url(/upload/2007/8/3/1450_select_bg.gif) repeat-x left top; }

.selectArea .left {

width:8px;

height:21px;

float:left;

background:url(/upload/2007/8/3/1450_select_left.gif) no-repeat left top;

}

.selectArea .right {

width:21px;

通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。

height:21px;

float:right;

background:url(/upload/2007/8/3/1450_select_right.gif) no-repeat left top;

}

.selectArea .right a {

display:block;

width:21px;

height:21px;

}

.selectArea .right i {

display:none;

}

.selectArea .center {

width:160px;

margin-left:5px;

margin-right:20px;

color:#FFF;

padding-top:3px;

}

/*Selects drop-down*/

.optionsDivInvisible, .optionsDivVisible {

position:absolute;

margin-top:-1px;

margin-left:3px;

width:172px;

background:#6f7074;

padding:2px;

font-size:11px;

z-index:20;

}

.optionsDivInvisible {

display:none;

}

.optionsDivVisible {

display:block;

}

.optionsDivVisible p {

margin:0;

padding:0;

}

.optionsDivVisible a {

color:#F2F2F2;

通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。

text-decoration:none;

display:block;

padding:1px 4px;

border:1px solid #6f7074;

}

.optionsDivVisible a:hover {

color:#FFF;

background:#5F6062;

border-color:#cfd0d6;

}

/*Button*/

.buttonSubmit, .buttonSubmitHovered {

width:69px;

height:26px;

color:#FFF;

font-weight:bold;

padding:2px 5px;

background:url(/upload/2007/8/3/1450_button.gif) no-repeat left top; cursor:pointer;

border:none;

}

.buttonSubmitHovered {

background-position:left bottom;

}

/*Test div - testing if stylesheets are enabled*/

#stylesheetTest {

position:absolute;

left:-999px;

width:10px;

height:10px;

}

</style>

</head>

<body>

<option selected="selected" value="Test area no.1">Test area no.1</option> <option value="Another test option& …… 此处隐藏：3360字，全部文档内容请下载后查看。喜欢就下载吧 ……

通过css实现表单form的美化.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/48850.html（转载请注明文章来源）

上一篇：欣祺益贵金属投资理财专题讲座
下一篇：分析化学考试复习题及答案