原来的效果

 美化之后的效果

 实现代码
  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. DDD领域驱动设计之聚合、实体、值对象

    关于具体需求,请看前面的博文:DDD领域驱动设计实践篇之如何提取模型,下面是具体的实体.聚合.值对象的代码,不想多说什么是实体.聚合等概念,相信理论的东西大家已经知晓了.本人对DDD表示好奇,没有在真 ...

  2. User and User Groups in Linux

    本文梳理了一下Linux用户和用户组的常用的一些命令. 有关的配置文件: /etc/group 存储当前系统中所有用户组信息 /etc/gshadow 存储当前系统中所有用户组的密码 /etc/pas ...

  3. [翻译]AKKA笔记 - ACTOR MESSAGING - REQUEST AND RESPONSE -3

    上次我们看Actor消息机制,我们看到开火-忘记型消息发出(意思是我们只要发个消息给Actor但是不期望有响应). 技术上来讲, 我们发消息给Actors就是要它的副作用. 这就是这么设计的.除了不响 ...

  4. IOS Animation-CAKeyframeAnimation例子（简单动画实现）

    在阅读本文之前,可以看看 CABasicAnimation的例子 也可以看看IOS Animation-CABasicAnimation.CAKeyframeAnimation详解&区别&am ...

  5. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

  6. Js~(function(){})匿名自执行方法的作用

    匿名自执行方法体(function(){})经常用在设计JS插件上面,它定义相关组件的行为,自动初始化相关属性,而且在页面中可以直接执行,你不需要手动执行它,它被自动被执行! 在设计你的匿名自执行方法 ...

  7. PDO预处理

    方法:bool PDOStatement::execute ([ array $input_parameters ] ) 1.PDOStatement::execute不使用参数 01)单个绑定值(P ...

  8. Mongodb安装与配置详解

    简介: mongodb作为一款通用型数据库,除了能够创建,读取,更新和删除数据外,还提供一系列不断扩展的独特功能. a.索引: mongodb支持二级索引,允许多种快速查询,且提供和唯一索引,复合索引 ...

  9. 利用奇异值分解（SVD）简化数据

    特征值与特征向量 下面这部分内容摘自:强大的矩阵奇异值分解(SVD)及其应用 特征值分解和奇异值分解在机器学习领域都是属于满地可见的方法.两者有着很紧密的关系,在接下来会谈到,特征值分解和奇异值分解的 ...

  10. SharePoint Server 2013开发之旅（四）：配置工作流开发和测试环境

    工作流这个功能,在SharePoint Server 2013中做了很大的改动.我们可以从微软官方的文档中了解一下大概的情况 http://technet.microsoft.com/zh-cn/li ...