CSS就能完成的骚操作

效果

首先我们经常会遇到再表单页面中会有一种情况，就是点击一个标签的时候，弹出它下面的多行文本框来进行文字的输入。例如下面的情况：
可以看到在点击“”其他路径“”的时候就可以弹出下面的多行文本，进行输入文字。

第一步

首先在html页面依次列出写出代码：
1“其他路径”所在的html标签
2多行文本框
以下代码展示：

<input id="else" type="radio" name="radio">
                <label for="else">其他途径</label>
            <div><label>请写出具体的途径</label>
                <textarea name="" id="" cols="100" rows="10"></textarea></div>

出现的效果示意图

能够看到显示的是最后的示意图，但是我们想要的效果是在没有点击“其他路径”的时候多行文本是不会弹出来的。
下图示意：

第二步

上图能够看到多行文本框是没有弹出来就是隐藏的，所以第二步需要先把多行文本进行隐藏，并且不能占用位置。
下面代码示意：

input[type="checkbox"]{
    display: none;
}

最后一步

利用checkbox属性实现点击“其他路径”弹出下面的多行文本框
下面代码示意：

input:checked~div{
    display: inline-block;
}

实现在最终我们想要的结果

利用css就能够实现的点击事件，你知道吗？