CSS - 输入框只带下边框输入框

只带下边框输入框

战旗 tv 里面的文本输入框非常简单明了，记录下来方便以后的使用。

效果如图： 

 

代码嵌套结构如下：

 

实现效果如下：

 

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .form { margin: 50px; }
        .row { margin-top: 25px;height: 26px;line-height: 26px;border-bottom: 1px solid #e8e8e8;width: 328px; }
        .input { position: relative;width: 328px;height: 26px; }
        .input input { display: block;width: 100%;height: 26px;border:none;background: none;outline:none; }
        .input label { position: absolute;top:0;left:0;height: 26px;line-height: 26px;font-size: 14px;color: #999; }
    </style>
</head>
    
    <!-- 输入框如下 -->
    <div class="form">
        <div class="row js-input">
            <div class="input">
                <input type="text">
                <label>帐号</label>
            </div>
        </div>
        <div class="row js-input">
            <div class="input">
                <input type="text">
                <label>密码</label>
            </div>
        </div>
        <div class="row js-input">
            <div class="input">
                <input type="text">
                <label>确认密码</label>
            </div>
        </div>
    </div>
    
</body>
</html>

 

网站地址：猛戳这里 

 

posted @ 2016-07-30 22:57  温柔的敲敲敲  阅读(1527)  评论(0)    收藏  举报