码迷,mamicode.com
首页 > 其他好文 > 详细

表单美化

时间:2015-08-02 06:24:06      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

清除样式:
技术分享

单选 复选  文本 下拉
技术分享技术分享
单选框
技术分享
技术分享
复选框
隐藏掉复选框  用<b>背景替换 display:block

文本框
技术分享
技术分享
HTML5 <Input >中 使用的属性 placeholder文本框空显示的东西     required 不允许空提交  圆角:CSS3 
  1. <head>
  2. <title></title>
  3. <link href="css/Clear.css" rel="stylesheet" type="text/css" />
  4. <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
  5. <style type="text/css">
  6. body
  7. {
  8. font: 14px/28px "微软雅黑" ;;
  9. }
  10. .contract
  11. {
  12. width: 700px;
  13. height: auto;
  14. background: #F5F6F6;
  15. margin: 40px auto;
  16. padding: 10px;
  17. }
  18. .contract ul
  19. {
  20. width: 700px;
  21. }
  22. .contract ul li
  23. {
  24. border-bottom: 1px solid #DFDFDF;
  25. padding: 10px;
  26. }
  27. .contract ul li label
  28. {
  29. width: 120px;
  30. display: inline-block;
  31. float: left;
  32. height: 20px;
  33. line-height: 20px;
  34. }
  35. .contract ul li input[type=text]
  36. {
  37. width: 220px;
  38. height: 20px;
  39. border: 1px solid #AAAAAA;
  40. padding: 3px 8px;
  41. color: #CCC;
  42. background: url(content/1.png) no-repeat;
  43. background-position: 98% -5px;
  44. border-radius: 10px;
  45. transition: padding 0.25s;
  46. }
  47. .contract ul li input[type=text]:focus
  48. {
  49. border-color: Red;
  50. }
  51. .contract ul li input[type=text]:focus
  52. {
  53. padding-right: 70px;
  54. }
  55. .contract *:focus
  56. {
  57. outline: none;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="contract">
  63. <form id="form1" action="#">
  64. <ul>
  65. <li>
  66. <label>
  67. 姓名:</label>
  68. <input type="text" name="yourname" value="SunBest" />
  69. </li>
  70. </ul>
  71. </form>
  72. </div>
  73. </body>
  74. </html>

下拉框
技术分享
技术分享

技术分享

技术分享
JS实现下拉
实现效果:
  1. <html>
  2. <head>
  3. <title>下拉列表</title>
  4. <link href="css/Clear.css" rel="stylesheet" type="text/css" />
  5. <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
  6. <script src="js/JScript.js" type="text/javascript"></script>
  7. <style type="text/css">
  8. body
  9. {
  10. font: 14x/28px;
  11. font-weight: normal;
  12. font-family: "微软雅黑";
  13. background: #333333;
  14. }
  15. #box
  16. {
  17. margin: 40px auto;
  18. width: 480px;
  19. height: 320px;
  20. border: 3px solid #000000;
  21. background: white;
  22. position: absolute;
  23. left: 50%;
  24. top: 50%;
  25. margin-left: -20%;
  26. margin-top: -200px;
  27. }
  28. .province
  29. {
  30. width: 320px;
  31. height: 42px;
  32. border: 1px solid black;
  33. background-color: Red;
  34. margin: 80px auto;
  35. position: relative;
  36. }
  37. .province strong
  38. {
  39. width: 64px;
  40. height: 42px;
  41. line-height: 42px;
  42. display: inline-block;
  43. float: left;
  44. padding-left: 10px;
  45. }
  46. #selectedProvince
  47. {
  48. height: 42px;
  49. width: 180px;
  50. color: Gray;
  51. padding-left: 10px;
  52. line-height: 42px;
  53. display: block;
  54. float: left;
  55. background: White url(content/down.gif) no-repeat 150px;
  56. cursor: pointer;
  57. }
  58. #allProvince
  59. {
  60. width: 320px;
  61. height: auto;
  62. clear: both;
  63. line-height: 30px;
  64. position: absolute;
  65. z-index:101;
  66. top: 43px;
  67. right: -1px;
  68. border: 1px solid #dfdfdf;
  69. border-top: none;
  70. background-color: White;
  71. display: none;
  72. }
  73. #allProvince li
  74. {
  75. height: 30px;
  76. border-bottom: 1px solid #dfdfdf;
  77. }
  78. #allProvince li b
  79. {
  80. display: block;
  81. float: left;
  82. width: 30px;
  83. text-align: center;
  84. }
  85. #allProvince li span
  86. {
  87. padding-right: 15px;
  88. cursor: pointer;
  89. }
  90. #allProvince li span:hover
  91. {
  92. color: Red;
  93. }
  94. #layer
  95. {
  96. width:100%;
  97. height:100%;
  98. position:absolute;
  99. z-index:100;
  100. <!-- background-color:blue;-->
  101. filter:alpha(opacity=0);
  102. opacity:0.5;
  103. display:none;
  104. }
  105. </style>
  106. <script type="text/javascript">
  107. function getDom(eleId) {
  108. return document.getElementById(eleId);
  109. }
  110. // 点下拉按钮
  111. function showProvince() {
  112. //$("#selectedProvince").toggle(showAllProvince, hideAllProvince);
  113. getDom("selectedProvince").onclick = function () {
  114. if (getDom("allProvince").style.display == "block") {
  115. hideAllProvince();
  116. } else if (getDom("allProvince").style.display != "block") {
  117. showAllProvince();
  118. }
  119. }
  120. }
  121. //显示所有城市
  122. function showAllProvince() {
  123. getDom("layer").style.display = "block";
  124. getDom("allProvince").style.display = "block";
  125. getDom("selectedProvince").style.backgroundImage = "url(content/up.jpg)";
  126. getDom("selectedProvince").style.color = "#CCCCCC";
  127. getDom("layer").onclick = function () {
  128. hideAllProvince();
  129. }
  130. selectProvince();
  131. }
  132. //隐藏所有城市
  133. function hideAllProvince() {
  134. getDom("layer").style.display = "none";
  135. getDom("allProvince").style.display = "none";
  136. getDom("selectedProvince").style.backgroundImage = "url(content/down.gif)";
  137. }
  138. //选择城市
  139. function selectProvince() {
  140. var pro = getDom("allProvince").getElementsByTagName("li");
  141. for (var i = 0; i < pro.length; i++) {
  142. var spans = pro[i].getElementsByTagName("span");
  143. for (var j = 0; j < spans.length; j++) {
  144. spans[j].onclick = function () {
  145. getDom("selectedProvince").innerHTML = this.innerHTML;
  146. hideAllProvince();
  147. getDom("selectedProvince").style.color = "black";
  148. }
  149. }
  150. }
  151. }
  152. addLoadEvent(showProvince);
  153. </script>
  154. </head>
  155. <body>
  156. <div id="box">
  157. <div class="province">
  158. <strong>送货至:</strong> <span id="selectedProvince">北京</span>
  159. <ul id="allProvince">
  160. <li><b>A</b><span>安徽</span></li>
  161. <li><b>A</b><span>安徽</span></li>
  162. <li><b>A</b><span>安徽</span></li>
  163. <li><b>A</b><span>安徽</span></li>
  164. <li><b>A</b><span>安徽</span></li>
  165. <li><b>A</b><span>安徽</span><span>安东</span></li>
  166. <li><b>A</b><span>安徽</span></li>
  167. <li><b>A</b><span>安徽</span></li>
  168. </ul>
  169. </div>
  170. </div>
  171. <div id="layer">
  172. </div>
  173. </body>
  174. </html>
  1. function addLoadEvent(func) {
  2. var oldonload = window.onload; //得到上一个onload函数
  3. if (typeof window.onload != "function") { //判断类型是否为function
  4. window.onload = func;
  5. }
  6. else {
  7. window.onload = function () {
  8. oldonload(); //调用之前覆盖的Onload
  9. func();//执行当前函数
  10. }
  11. }
  12. }
  1. /* File Created: 八月 1, 2015 */
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blackquote,th,td
  3. {
  4. margin:0;
  5. padding:0;
  6. }
  7. table
  8. {
  9. border-collapse:collapse;
  10. }
  11. ol,ul
  12. {
  13. list-style:none;
  14. }
  15. address,caption,cite,code,dfn,em,strong,th,var
  16. {
  17. font-weight:400;
  18. font-style:normal;
  19. }
  20. caption,th
  21. {
  22. text-align:left;
  23. }
  24. h1,h2,h3,h4,h5,h6
  25. {
  26. font-weight:400;
  27. font-size:100%;
  28. }
  29. q:before,q:after
  30. {
  31. content:‘‘;
  32. }
  33. fieldset,img,abbr,acronym
  34. {
  35. border:0;
  36. }






附件列表

     

    表单美化

    标签:

    原文地址:http://www.cnblogs.com/TT-Cartier/p/4695016.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!