效果
首先我们经常会遇到再表单页面中会有一种情况,就是点击一个标签的时候,弹出它下面的多行文本框来进行文字的输入。例如下面的情况:
可以看到在点击“”其他路径“”的时候就可以弹出下面的多行文本,进行输入文字。
第一步
首先在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就能够实现的点击事件,你知道吗?