原来的效果

 美化之后的效果

 实现代码
  1. <style>
  2. .container {
  3. margin:0auto;
  4. width:620px;
  5. }
  7. fieldset {
  8. padding:18px;
  9. background-color:#c7fff5;
  10. }
  12. fieldset legend {
  13. font-size: larger;
  14. border:1px darkgray solid;
  15. padding:10px;
  16. background-color: white;
  17. }
  19. input[type="text"],
  20. input[type="tel"],
  21. input[type="email"],
  22. textarea {
  23. display: block;
  24. width:96%;
  25. padding:2%;
  26. margin:0020px0;
  27. border:1px solid silver;/*为输入控件添加border，使之与label对齐*/
  28. border-top: none;
  29. font-size:12px;
  30. }
  32. textarea {
  33. resize: none;/*不允许调整textarea的大小，但IE浏览器本身就不支持调整textarea的大小*/
  34. }
  36. label {
  37. display: block;
  38. width:98%;
  39. padding:1%;
  40. font-size:12px;
  41. background-color: cornflowerblue;
  42. color: aliceblue;
  43. border:1px solid slategray;/*为label元素添加border元素使之与输入控件对齐*/
  44. }
  46. input[type="reset"], input[type="submit"]{
  47. margin:10px30px;
  48. background-color: darkorange;
  49. color: white;
  50. padding:5px;
  51. height:45px;
  52. width:80px;
  53. border:0;
  54. }
  56. input[type="reset"], input[type="submit"]:hover {
  57. cursor: pointer;
  58. border-color: royalblue;
  59. }
  61. input[type="reset"], input[type="submit"]:active {
  62. cursor: pointer;
  63. border-color: black;
  64. outline-color: cornflowerblue;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <divclass="container">
  70. <h2>应用样式美化表单</h2>
  71. <hr/>
  72. <form>
  73. <fieldset>
  74. <legend>Contact</legend>
  75. <labelfor="userName">Name:</label><inputtype="text"id="userName"><br/>
  76. <labelfor="userEmail">Email Address:</label><inputtype="email"name="userEmail"id="userEmail"><br/>
  77. <labelfor="homeAddress">Address:</label><inputtype="text"id="homeAddress"><br/>
  78. <labelfor="phoneNum">Phone Number:</label><inputtype="tel"id="phoneNum"><br/>
  79. <labelfor="messages">Messages:</label><textareaid="messages"cols="10"rows="2"></textarea>
  81. </fieldset>
  82. <inputtype="reset"value="Reset">&nbsp;<inputtype="submit"value="Submit">
  83. </form>
  84. </div>
 
注意点：
               IE浏览器并不支持对textarea 的大小调整；
               运用选择器注意范围，属性选择器可以实现同一类型样式的调整；
               要学着应用百分比写控件的宽度与高度；

应用Css美化表单的更多相关文章

  1. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  2. CSS3美化表单 移动端可用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  4. （10）用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  5. CSS3美化表单控件

    表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...

  6. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  7. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  8. 一天搞定CSS：表单（form）--20

    1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  9. CSS实现表单

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. 通过分析iframe和无阻塞脚本关系能让我们更懂iframe

    在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,如 ...

  2. 用DirectX实现魔方（三）视角变换及缩放（附源码）

    在本系列第一篇介绍过鼠标按键的功能,如下. 左键拖拽 - 旋转魔方 右键拖拽 - 变换视角 滚轮 - 缩放魔方 今天研究一下如何实现后面两个功能,用到的技术主要是Arcball,Arcball是实现M ...

  3. 用DirectX实现魔方（二）

    这篇说一下如何构造魔方,主要包括魔方几何体的构造及纹理贴图.以下论述皆以三阶魔方为例,三阶魔方共有3 x 3 x 3 = 27个小立方体. 构造魔方 在第一篇里面说过,最初模型用的是微软的.x文件格式 ...

  4. 了解一下JavaScript的未来——ECMAScript5

    神马是EcmaScript5 首先得先搞清楚ECMAScript是神马,我们知道JavaScript或者说LiveScript最开始是Netscape搞出来的,后来微软也跟进搞出了Jscript,Sc ...

  5. 你不可不知的HTML优化技巧

    如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript.图像优化.服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言 ...

  6. UStore-添加自定义工作流（JDF）到产品

    这里使用的是8.2版本.所有的帮助文档可以在可以看到: http://www.xmpie.com/uStore%20Help/uStore_Help_Page.htm 1.登录 首先,登录到ustor ...

  7. Atitit 知识图谱的数据来源

    Atitit 知识图谱的数据来源   2. 知识图谱的数据来源1 a) 百科类数据2 b) 结构化数据3 c) 半结构化数据挖掘AVP (垂直站点爬虫)3 d) 通过搜索日志(query record ...

  8. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  9. Microsoft Visual Studio正忙解决办法

    问题描述 前段时间用vs2015进行开发.出现如下问题,关闭vs进程重启vs还是无法解决. 如何解决 进入本地项目.vs文件夹 这个文件夹下有个.suo文件,删除该文件,用任务管理器杀掉vs的进程,重 ...

  10. Yii的学习(4)--Active Record

    摘自Yii官网:http://www.yiiframework.com/doc/guide/1.1/zh_cn/database.ar 在官网原文的基础上添加了CDbCriteria的详细用法. 虽然 ...