码迷，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.         }
  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. }






附件列表

     

    表单美化

    标签：

    原文地址：http://www.cnblogs.com/TT-Cartier/p/4695016.html
    踩
    (0)
    赞
    (0)
       
    举报
    评论 一句话评论（0）
    登录后才能评论！
    分享档案
    更多>
    2021年07月29日 (22)
    2021年07月28日 (40)
    2021年07月27日 (32)
    2021年07月26日 (79)
    2021年07月23日 (29)
    2021年07月22日 (30)
    2021年07月21日 (42)
    2021年07月20日 (16)
    2021年07月19日 (90)
    2021年07月16日 (35)
    周排行
    mamicode.com排行更多图片
    更多
    友情链接
    兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
    关于我们 - 联系我们 - 留言反馈
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码！