应用Css美化表单

原来的效果

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





posted @ 2016-11-06 20:10 Jener_Yan 阅读(...) 评论(...) 编辑 收藏