重写input样式

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body,h1,footer,main,div{
        margin: 0;
        padding: 0;
      }
      body{
        display: flex;
        flex-flow:column;
        min-height: 100vh;
      }
      main{
        flex:1;
      }
      .input_control{
        width: 360px;
        margin: 20px auto;
      }
      input[type="text"],#btn1,#btn2{
        box-sizing: border-box;
        text-align:right;
        font-size: 1.4em;
        height: 2.7em;
        border-radius: 4px;
        border:1px solid #c8cccf;
        color: #6a6f77;
        -webkit-appearance: none;
        -moz-appearance: none;
        display: block;
        outline: 0;
        padding: 0 1em;
        text-decoration: none;
        width: 100%;
      }
      input[type="text"]:focus{
        border: 1px solid #ff7496;
      }


      footer{
        padding: 1em;
        padding: 1em calc(50% - 450px);
        background: #333;
        color:#fff;
        /* height: 100px; */
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>

      <header>
        <h1>Site name</h1>
      </header>
      <main>
        <form action="" method="get">
            <div class="input_control">
                <input type="text" class="form_input" placeholder="Enter vendor key here"/>
            </div>
            <div class="input_control">
                <input type="text" class="form_input" placeholder="Enter room name here"/>
            </div>
            <div class="input_control">
                <input type="text" class="form_input" placeholder="Input key here if use encryption"/>
            </div>
            <div class="input_control">
                <a id="btn1"><b></b>Join</a>
            </div>
            <div class="input_control">
                <a id="btn2"><b></b>Video Options</a>
            </div>
        </form>


      </main>

    <footer>
      <p>@ 2015 No right reserved.</p>
      <p>Made with by an anoymous pastafarian</p>
    </footer>
  </body>
</html>
 

相关内容推荐