原来的效果

 美化之后的效果

 实现代码
  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. 字符串查找String.IndexOf

    String.indexOf的模拟实现,没想象中有多么高深的查找算法,就是最普通的遍历查找 思路:先找到第一个相同的字符,然后依次比较后面的字符,若都相等则表示查找成功 /** * 查找字符串patt ...

  2. 360路由器刷openwrt后设置wifi中继

    上一篇文章(360路由器刷openwrt.不死uboot.双系统 .wifi中继 - 飞鸿影~ - 博客园)讲了如何在360路由器C301上安装openwrt以及安装双系统.这篇文章讲如何设置无线中继 ...

  3. JS实现无限分页加载——原理图解

    由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...

  4. mvc 权限设计

    1.http://blog.csdn.net/vera514514/article/details/8285154 2.http://www.cnblogs.com/cmsdn/p/3433995.h ...

  5. 利用@property实现可控的属性操作

    利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...

  6. BrowserSync前端调试工具使用

    上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...

  7. NUMA架构的CPU -- 你真的用好了么？

    本文从NUMA的介绍引出常见的NUMA使用中的陷阱,继而讨论对于NUMA系统的优化方法和一些值得关注的方向. 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢钧轶(cenalulu) ...

  8. php易混淆知识点

    一.define(“constant”,  “hello world”);和const constant = “hello world”;的区别? (0).使用const使得代码简单易读,const本 ...

  9. 序列sequence中的cache问题

    Oracle中序列Sequence的创建语法如下: CREATE SEQUENCE [ schema. ] sequence [ { INCREMENT BY | START WITH } integ ...

  10. AIX碎碎念

    1. 查看系统版本 oslevel 2. 查看系统内存 svmon -G (注意,size的单位为4k) 3. 查看机器型号 uname -Mu 4. 查看机器硬件信息,如cpu,内存等 prtcon ...