根据输入复选框状态应用CSS规则

Question

我目前正在开发一个使用:checked变量的站点将规则应用于CSS.我有一个复选框输入,当触发时,应完成两件事.它应该做的第一件事是在检查时将div从0到200的高度扩展,并在未选中时将其重新设置为0.我没有触发第一个任务的问题.在选中框时应该完成的第二件事是变换:旋转(45度)div的一个" +",它应该旋转45度成" x "(不是实际的x,而是旋转+ ).

我目前有我的代码设置来显示动画:悬停,但这只是为了说明的目的,这不会在我的最终代码中.所以将鼠标悬停在" +"上以查看我正在尝试使用:checked输入完成的操作.

如果你愿意看看我的代码,并告诉我我做错了什么,我将非常感激!如果您有任何疑问,请告诉我.

注意:理想情况下,我正在寻找一个纯粹的CSS解决方案,而不需要JS.如果这是不可能的,请告诉我.

这是我的代码笔.

Answer 1

我前几天在这里写了一个类似的解决方案.

基本上,使用该:checked方法时您受到限制.你是依托邻近的和一般的兄弟组合程序,+,~.如果元素不是一般的前一个兄弟,它就不会起作用.

在这个例子中,.expand不是前面的兄弟姐妹.因此,解决方案是将input元素放在文档的根部,然后使用选择器input[name='panel']:checked ~ label .rotate更改.rotate元素.注意,一般的兄弟组合~器现在也被用作相邻的兄弟组合器,+.

不需要JS - 更新示例

修改后的HTML:

<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
  Click Me
  <div class="rotate">+</div>
</label>
<div class="expand">
  Content goes here.
</div>

更新的CSS:

input[name='panel']:checked ~ label .rotate {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

值得注意的是,我也将过渡属性移动到.rotate元素中.