重写input样式

最新推荐文章于 2023-08-01 13:13:34 发布

di84186

最新推荐文章于 2023-08-01 13:13:34 发布

阅读量656

点赞数

文章标签： python

原文链接：http://www.cnblogs.com/ron123/p/9608887.html

版权

<!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>

　　摘自https://blog.csdn.net/qq_35718410/article/details/52149894

转载于:https://www.cnblogs.com/ron123/p/9608887.html

di84186

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重写input样式

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> body,h1,foote...
复制链接

扫一扫