css - Accordion input::before 伪元素

标签 css accordion

我有一个 Accordion 菜单,我相信它使用一个复选框来激活和停用展开,它使用下面的 css 根据它是否展开来转换箭头。

.expand input + *::before {
content: '»';
color: #ffffff;
font-size: 25px;
padding-right: 18px;
padding-top: 0;
float: left;
transition: all 0.2s;
margin-top: -5px;
}

.expand input:checked + *::before {
    transform: rotate(90deg);
    padding-right: 15px;
    padding-top: 15px;
}

我遇到的问题是我在 <li> 中使用复选框 Accordion 中的元素,不希望将上述样式应用于这些复选框。

不过我似乎找不到解决这个问题的方法。

编辑** 我意识到我用这种方式过于复杂了,我已经删除了扩展的列表项并使用了 react bootstrap Accordion ,它在没有使用复选框的情况下扩展。

最佳答案

你可以通过给它一个像 input.checkbox-hack:checked 这样的类来命名复选框

关于css - Accordion input::before 伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34719597/

相关文章:

css - Oracle Apex 布局 - 突出的子元素

javascript - 如何连接两个选项和切换开关按钮

javascript - jquery slider 和 amchart 的问题

ASP.NET 面板未结束

jquery Accordion 折叠和 CSS 问题

javascript - 在 Jquery Mobile 中显示可折叠内容时如何隐藏可折叠标题?

html - 在 Edge 浏览器上,如何使用 CSS 更改输入占位符文本颜色?

css - 在右侧导航栏上移动一项

javascript - 用散列标签打开 Accordion