Edit in JSFiddle

 var container = document.querySelector("#container");
 var input = document.querySelector("input");

    container.addEventListener("click", function () {
        input.focus();
    });
    input.addEventListener("focus", function () {
        container.className = "focus";
    });
    input.addEventListener("focusout", function () {
        container.className = "";
    })

<div id="container">
    <span>请输入内容</span>
    <input type="text"/>
</div>

body{
  background:#fff;
  
}
#container {
        height: 40px;
        position: relative;
        margin-top: 40px;
    }

    .focus span {
        font-size: 18px;
        top: -20px;
        color: #20a0ff;
    }

    .focus input {
        border-bottom: 1px solid #20a0ff;
    }

    span {
        position: absolute;
        top: 8px;
        left: 2px;
        color: #ccc;
        font-size: 12px;
        transition: 0.2s ease all;
    }

    input {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border: none;
        border-bottom: 1px solid #ccc;
        outline: none;
    }