通过css实现表单form的美化
更新时间：2023-09-05 23:23:01 阅读量： 教育文库 文档下载
- 通过车牌号怎么查车主推荐度：
- 相关推荐
通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.77cn.com.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.77cn.com.cn/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*/
通过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(http://www.77cn.com.cn/upload/2007/8/3/1450_radio.gif) no-repeat left top; }
.radioAreaChecked {
background:url(http://www.77cn.com.cn/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(http://www.77cn.com.cn/upload/2007/8/3/1450_checkbox.gif) no-repeat left top;
}
通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。
.checkboxAreaChecked {
background:url(http://www.77cn.com.cn/upload/2007/8/3/1450_checkbox.gif) no-repeat left bottom;
}
/*Text inputs*/
.textinput, .textinputHovered {
width:236px;
height:15px;
background:url(http://www.77cn.com.cn/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(http://www.77cn.com.cn/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(http://www.77cn.com.cn/upload/2007/8/3/1450_select_bg.gif) repeat-x left top; }
.selectArea .left {
width:8px;
height:21px;
float:left;
background:url(http://www.77cn.com.cn/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(http://www.77cn.com.cn/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(http://www.77cn.com.cn/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>
<div id="container">
<form action="vars.php" method="post">
<select size="1" id="mySelect1" name="mySelect1">
<option selected="selected" value="Test area no.1">Test area no.1</option> <option value="Another test option">Another test option</option>
<option value="And another one">And another one</option>
<option value="One last option for me">One last option for me</option>
通过css实现表单form的美化,文档里是个完整的Html页面源代码,下载后另存为html文件就可以看效果了。
</select>
<br />
<select size="1" id="mySelect2" name="mySelect2">
<option selected="selected" value="Test area no.2">Test area no.2</option> <option value="Another test">Another test</option>
<option value="And another one">And another one</option>
<option value="And yet another one">And yet another one</option>
<option value="One last option for me">One last option for me</option>
</select>
<br />
<input type="radio" name="radioSet" id="option1" value="foo" /><label for="option1">foo</label><br />
<input type="radio" name="radioSet" id="option2" value="bar" /><label for="option2">bar</label><br />
<input type="radio" name="radioSet" id="option3" value="another option" /><label for="option3">another option</label><br />
<br />
<input type="checkbox" name="checkSet1" id="check1" value="foo" /><label for="check1">foo</label><br />
<input type="checkbox" name="checkSet2" id="check2" value="bar" /><label for="check2">bar</label><br />
<input type="checkbox" name="checkSet3" id="check3" value="another option" /><label for="check3">another option</label><br />
<br />
<label for="textinput">Username:</label><br />
<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br />
<label for="passwordinput">Password:</label><br />
<input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br />
<br />
<label for="textareainput">Comments:</label><br />
<textarea id="textareainput" name="textareainput" class="textarea"></textarea><br /> <br />
<input type="submit" value="Submit" class="buttonSubmit" />
<div id="stylesheetTest"></div>
</form>
<p> </p>
<p>Niceforms v.0.9<br>©Lucian Slatineanu - <a href="http://www.77cn.com.cn">http://www.77cn.com.cn</a></p>
<p>Feel free to use and modify but please provide credits.</p>
</div>
</body>
</html>
正在阅读：
通过css实现表单form的美化09-05
当前土地复垦存在问题及建议03-20
笑傲江湖激活码获取全攻略07-19
抗菌药物治疗性应用的基本原则06-02
099基于MSC.NASTRAN的黏弹性材料阻尼分析方法03-29
三年级人教版下学期应用题50道06-02
中国历史七年级记忆顺口溜07-20
廊秦沈微波搬迁项目建议书 - 图文03-15
校园心理剧剧本02-17
- exercise2
- 铅锌矿详查地质设计 - 图文
- 厨余垃圾、餐厨垃圾堆肥系统设计方案
- 陈明珠开题报告
- 化工原理精选例题
- 政府形象宣传册营销案例
- 小学一至三年级语文阅读专项练习题
- 2014.民诉 期末考试 复习题
- 巅峰智业 - 做好顶层设计对建设城市的重要意义
- （三起）冀教版三年级英语上册Unit4 Lesson24练习题及答案
- 2017年实心轮胎现状及发展趋势分析（目录）
- 基于GIS的农用地定级技术研究定稿
- 2017-2022年中国医疗保健市场调查与市场前景预测报告（目录） - 图文
- 作业
- OFDM技术仿真（MATLAB代码） - 图文
- Android工程师笔试题及答案
- 生命密码联合密码
- 空间地上权若干法律问题探究
- 江苏学业水平测试《机械基础》模拟试题
- 选课走班实施方案
- 表单
- 美化
- 通过
- 实现
- form
- css
- 法式家具的巴洛克风格
- 川农《市场营销学(本科)》在线作业满分答案
- 吃大锅饭意大利人学成语Chinese-English dictionary of idioms and phrases
- 弟子规正版全文,带拼音,完善打印版
- 施工方案编写目录、格式
- 海通证券-房地产行业：商业地产,下一价值重估的主战场
- 焊接材料领用、回收、发放制度
- 2019部编道德与法治四年级上册第一单元我们班四岁了课后练习题
- 民政部门党建工作存在的问题及解决建议
- 2011年四川农村信用社招聘计算机专业笔试真题(计算机专业)
- 疾病诊断相关组DRGs研究的现状、问题及对策
- 聚硅氧烷—聚脲多嵌段共聚物形态结构的研究
- 招商引资骗局收集
- 颈椎骨质增生
- 人教版六年级上册科学教案
- EDA期末考试试卷
- 智慧树知到《玩创未来》章节测试答案
- 2011丰台二模语文试卷及答案
- 大槐中学2013-2014学年第二学期《雷锋日》活动方案
- 专业技术人员时间管理与项目管理.