原来的效果

 美化之后的效果

 实现代码
  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. 在MVVM模式中，按钮Click事件的绑定方法

    在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的 ...

  2. java提高篇(二二)---LinkedList

    一.概述 LinkedList与ArrayList一样实现List接口,只是ArrayList是List接口的大小可变数组的实现,LinkedList是List接口链表的实现.基于链表实现的方式使得L ...

  3. 浅谈Excel开发：六 Excel 异步自定义函数

    上文介绍了Excel中的自定义函数(UDF ),它极大地扩展了Excel插件的功能,使得我们可以将业务逻辑以Excel函数的形式表示,并可以根据这些细粒度的自定义函数,构建各种复杂的分析报表. 普通的 ...

  4. Android多线程分析之三：Handler，Looper的实现

    Android多线程分析之三:Handler,Looper的实现 罗朝辉 (http://www.cnblogs.com/kesalin/) CC 许可,转载请注明出处 在前文<Android多 ...

  5. 关于node.js的误会

    昨天写了篇博客,介绍了一下我对node.js的第一次亲密接触后的感受,以为node.js很小众,出乎我意料很多人感兴趣,并且对博客中的细节问题做了评论,最多的是围绕node.js的异步与单线程展开的, ...

  6. i++ and ++i efficiency

    其实这个问题,百度的话,有一大堆的参考资料,但是,在这里,我产生了一些困惑,他们所分析的结果,和我的测试代码不一致,这让我纠结了,所以,再次的写一下这个问题,顺顺思路. 我的测试环境:系统:Windo ...

  7. IOS 公共类-数字处理

    1.写一个方法,调用的时候交换两个数的值 -(void) swap:(int*)a andNumber:(int*)b{ int temp = *a; *a = *b; *b = temp; } 调用 ...

  8. 知方可补不足～sqlserver中使用ROW_NUMBER进行的快速分页

    回到目录 这个在SQL2005之后最见的一种分页方式,也是Linq默认生成的执行分页的方法(skip,take),当然在性能上小数量没有问题,在数据达到百万时会很慢,这是我们要清楚的,有时我们在LIN ...

  9. struts2学习笔记之八:Action中方法的动态调用

    方法一:action名称+!+方法名称+后缀 Action类中增加addUser()和delUser()方法, package com.djoker.struts2; import org.apach ...

  10. 如何使用ITEXTSHARP将HTML代码字符串写进PDF

    原文 如何使用ITEXTSHARP将HTML代码字符串写进PDF itextsharp包括一个简单的类,可以用来根据html代码或字符串创建pdf文件.使用此类,你可以使用短短几行代码,就将 HTML ...