CSS - input

一个 input 特效

<!doctype html>
<html>
<head>
    <title>漂亮的input标签</title>
    <meta charset="utf-8">
    <meta name="generator" content="editplus">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style type="text/css">
        .input-container {
            width: 500px;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-flow: column-reverse;
            flex-flow: column-reverse;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            margin: 100px auto;
        }
        .input-container input {
            -webkit-box-ordinal-group: 11;
            order: 10;
            -ms-flex-order: 10;
            outline: none;
            border: none;
            width: 100%;
            padding: 10px 0;
            font-size: 20px;
            border-bottom: 1px solid #d5d5d5;
            text-indent: 10px;
        }
        .input-container input::-moz-placeholder {
            opacity: 0;
        }
        .input-container input::-webkit-input-placeholder {
            opacity: 0;
        }
        .input-container input:-ms-input-placeholder {
            opacity: 0;
        }
        .input-container input, .input-container label {
            transition: all 0.3s;
        }
        .input-container label {
            -webkit-box-ordinal-group: 101;
            -ms-flex-order: 100;
            order: 100;
            color: #3f4f5b;
            -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
            -webkit-transform: translate(10px, 40px);
            transform: translate(0px, 40px); }
        .input-container .bottom-line {
            order: 2;
            width: 0;
            height: 2px;
            background: #658db5;
            transition: all 0.3s;
        }
        .input-container input:focus {
            border-bottom-color: #fff;
        }
        .input-container input:focus ~ div,
        .input-container input:not(:placeholder-shown) ~ div {
            width: 100%;
        }
        .input-container input:focus + label,
        .input-container input:not(:placeholder-shown) + label {
            color: #52616c;
            -webkit-transform: translate(10px) scale(0.9);
            transform: translate(10px) scale(0.9);
        }
    </style>
</head>
<body>
<div class="input-container">
    <input type="input" id="input" placeholder="请输入内容">
    <label for="input">请输入内容</label>
    <div class="bottom-line"></div>
</div>
</body>
</html>

来自 beautifulinput

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论