原来的效果

 美化之后的效果

 实现代码
  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. 5天玩转C#并行和多线程编程 —— 第五天 多线程编程大总结

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  2. FusionCharts简单教程（四）-----基本数字格式

          在统计图例中什么是最基本,最重要的元素?那就是数据.一个数据的统计图像那就是一堆空白.但是数据存在多种形式,比如小数,比如千分位等等.又如若一个数据是12.000000001,对于数据要求 ...

  3. 依据BOM和已经存在的文件生成其他种类的文件

    在BOM中记录中有物料编码,物料名称,物料规格等,而且依据BOM已经生成了一些的文件,如采购规格书,这个时候需要生成相应的检验规格书模板,可以使用下面的VBA代码,具体代码如下: Function I ...

  4. jquery获取checkbox的值并post提交

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

  5. 绝对干货：自定义msi安装包的执行过程

    有时候我们需要在程序中执行另一个程序的安装,这就需要我们去自定义msi安装包的执行过程. 比如我要做一个安装管理程序,可以根据用户的选择安装不同的子产品.当用户选择了三个产品时,如果分别显示这三个产品 ...

  6. 每天一个linux命令（53）：route命令

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...

  7. Atitit 理解Monad attilax总结

    Atitit 理解Monad attilax总结 但函数式编程最大的一个问题是,函数是一个数学抽象,在现实世界中不存在,1 那既然这样就够用了,还要 Monad 干嘛?Monad 的作用在这里就体现出 ...

  8. 《Wireshark数据包分析实战》 - http背后，tcp/ip抓包分析

    作为网络开发人员,使用fiddler无疑是最好的选择,方便易用功能强. 但是什么作为爱学习的同学,是不应该止步于http协议的,学习wireshark则可以满足这方面的需求.wireshark作为抓取 ...

  9. js 的使用原则

    1.平稳退化:确保页面在没有javaScript的情况下也能正常运行 2.向后兼容:确保老版本的浏览器不会因为javaScript而死掉 3.性能最优:确保脚本执行的性能最优 4.页面与js分离:最大 ...

  10. asp.net 站点重启

    有时一些特殊情况需要重启站点,在System.Web.dll程序集下HttpRuntime类下有一个静态方法UnloadAppDomain,使用这个方法可以重启站点: protected void b ...