利用css3伪类实现评论框

一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮会根据输入框中是否有字段分为可点击和不可点击两种状态。

需求：

输入框中没文字，没焦点，按钮为‘点赞’；

输入框中没有文字，但有焦点时，按钮为灰色的‘发送’；

输入框中有文字，但没有验证成功，则输入框中的文字颜色为红色;

输入框中有文字且验证成功，则按钮为绿色的‘发送’；

开发：

1. 如果用JS实现，需要绑定监听输入框的change和focus事件。

2. 用CSS中的伪类就可以实现类似的效果。

<input type="email" class="input" required>
<button class="like">点赞</button>
<button class="send">发送</button>

/* put your styles here */
        .send {
            display: none;
        }

        .input:focus ~ .send {
            display: inline-block;
        }

        .input:valid ~ .send {
            display: inline-block;
            background: green;
        }
        .input:invalid{color:red}
        .input:focus ~ .like, .input:valid ~ .like {
            display: none;
        }

看效果喽：

知识点：

：required 为必填项，表示输入框不能为空；

：valid 为‘有效’，表示输入的内容符合要求触发；

：invalid 为‘无效’，表示输入的内容不符合要求才触发的；