CSS3扁平化风格联系表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3扁平化风格联系表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3扁平化风格联系表单</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
  <div class="container">  
  <form id="contact" action="" method="post">
    <h3>Quick Contact</h3>
    <h4>Contact us today, and get reply with in 24 hours!</h4>
    <fieldset>
      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
</div>
</body>
</html>

CSS代码(style.css):

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:"Open Sans",Helvetica,Arial,sans-serif;font-weight:300;font-size:12px;line-height:30px;color:#777;background:#0CF;}
.container{max-width:400px;width:100%;margin:0 auto;position:relative;}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],#contact textarea,#contact button[type="submit"]{font:400 12px/16px "Open Sans",Helvetica,Arial,sans-serif;}
#contact{background:#F9F9F9;padding:25px;margin:5px 0;}
#contact h3{color:#F96;display:block;font-size:30px;font-weight:400;}
#contact h4{margin:5px 0 15px;display:block;font-size:13px;}
fieldset{border:medium none !important;margin:0 0 10px;min-width:100%;padding:0;width:100%;}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],#contact textarea{width:100%;border:1px solid #CCC;background:#FFF;margin:0 0 5px;padding:10px;}
#contact input[type="text"]:hover,#contact input[type="email"]:hover,#contact input[type="tel"]:hover,#contact input[type="url"]:hover,#contact textarea:hover{-webkit-transition:border-color 0.3s ease-in-out;-moz-transition:border-color 0.3s ease-in-out;transition:border-color 0.3s ease-in-out;border:1px solid #AAA;}
#contact textarea{height:100px;max-width:100%;resize:none;}
#contact button[type="submit"]{cursor:pointer;width:100%;border:none;background:#0CF;color:#FFF;margin:0 0 5px;padding:10px;font-size:15px;}
#contact button[type="submit"]:hover{background:#09C;-webkit-transition:background 0.3s ease-in-out;-moz-transition:background 0.3s ease-in-out;transition:background-color 0.3s ease-in-out;}
#contact button[type="submit"]:active{box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);}
#contact input:focus,#contact textarea:focus{outline:0;border:1px solid #999;}
::-webkit-input-placeholder{color:#888;}
:-moz-placeholder{color:#888;}
::-moz-placeholder{color:#888;}
:-ms-input-placeholder{color:#888;}

附件:下载该文件资源,减少时间成本(增值服务)