表单美化

清除样式：

单选 复选  文本 下拉

单选框


复选框
隐藏掉复选框  用<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.         }
  122.         //显示所有城市
  123.         function showAllProvince() {
  124.             getDom("layer").style.display = "block";
  125.             getDom("allProvince").style.display = "block";
  126.             getDom("selectedProvince").style.backgroundImage = "url(content/up.jpg)";
  127.             getDom("selectedProvince").style.color = "#CCCCCC";
  128.             getDom("layer").onclick = function () {
  129.                 hideAllProvince();
  130.             }
  131.             selectProvince();
  132.         }
  133.         //隐藏所有城市
  134.         function hideAllProvince() {
  135.             getDom("layer").style.display = "none";
  136.             getDom("allProvince").style.display = "none";
  137.             getDom("selectedProvince").style.backgroundImage = "url(content/down.gif)";
  139.         }
  140.         //选择城市
  141.         function selectProvince() {
  142.             var pro = getDom("allProvince").getElementsByTagName("li");
  143.             for (var i = 0; i < pro.length; i++) {
  144.                 var spans = pro[i].getElementsByTagName("span");
  145.                 for (var j = 0; j < spans.length; j++) {
  146.                     spans[j].onclick = function () {
  147.                         getDom("selectedProvince").innerHTML = this.innerHTML;
  148.                         hideAllProvince();
  149.                         getDom("selectedProvince").style.color = "black";
  150.                     }
  151.                 }
  152.             }
  154.         }
  156.         addLoadEvent(showProvince);
  157.     
  158.     </script>
  159. </head>
  160. <body>
  161.     <div id="box">
  162.         <div class="province">
  163.             <strong>送货至:</strong> <span id="selectedProvince">北京</span>
  164.             <ul id="allProvince">
  165.                 <li><b>A</b><span>安徽</span></li>
  166.                 <li><b>A</b><span>安徽</span></li>
  167.                 <li><b>A</b><span>安徽</span></li>
  168.                 <li><b>A</b><span>安徽</span></li>
  169.                 <li><b>A</b><span>安徽</span></li>
  170.                 <li><b>A</b><span>安徽</span><span>安东</span></li>
  171.                 <li><b>A</b><span>安徽</span></li>
  172.                 <li><b>A</b><span>安徽</span></li>
  173.             </ul>
  174.         </div>
  175.     </div>
  176.     <div id="layer">
  177.     </div>
  178. </body>
  179. </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. }
  8. table
  9. {
  10. 	border-collapse:collapse;
  11. }
  13. ol,ul
  14. {
  15. 	list-style:none;
  16. }
  18. address,caption,cite,code,dfn,em,strong,th,var
  19. {
  20. 	font-weight:400;
  21. 	font-style:normal;
  22. }
  24. caption,th
  25. {
  26. 	text-align:left;
  27. }
  29. h1,h2,h3,h4,h5,h6
  30. {
  31. 	font-weight:400;
  32. 	font-size:100%;
  33. }
  35. q:before,q:after
  36. {
  37. 	content:'';
  38. }
  40. fieldset,img,abbr,acronym
  41. {
  42. 	border:0;
  43. }






附件列表

     

    posted on 2015-08-02 03:15  tongjiahao  阅读(252)  评论(0)  编辑  收藏  举报