非js实现input是否为空样式变化

<input class="real-input" type="text" required>
<div class="model-input">请输入评论…</div>

    .model-input{
        .flex(ac);
        width: 670px/@p;
        height: 64px/@p;
        padding-left: 24px/@p;
        border-radius: 4px;
        color: #c8c8c8;
        font-size: 26px/@p;
        box-sizing: border-box;
        background: #f7f7f7;
    }
    .real-input{
        position: absolute;
        z-index: 1;
        top: 12px/@p;
        width: 670px/@p;
        height: 64px/@p;
        border: none;
        outline: none;
        color: #050c1c;
        background-color: transparent;
        &:focus+.model-input{
            opacity: 0;
        }
        &:valid+.model-input{
            opacity: 0;
        }
    }