Html 检查输入类型时如何更改多级菜单下拉图标?
我只使用css创建了一个多级下拉菜单。 它在包含子元素的Html 检查输入类型时如何更改多级菜单下拉图标?,html,css,Html,Css,我只使用css创建了一个多级下拉菜单。 它在包含子元素的li元素旁边有一个下拉图标 假设当我点击特色新闻时,我想更改菜单down.png图标 我知道可以使用input元素::选中了属性,但不知何故,我做不到 这是我的密码 HTML: 特色新闻 子1 CSS: 。下拉菜单{ 高度:7px!重要; 职位:相对!重要; 左:8px!重要; 顶部:-4px!重要; 右边距:0px!重要; } .cd手风琴菜单输入[类型=复选框]:选中。有下拉菜单::后{ 内容:“; 宽度:2
li
元素旁边有一个下拉图标
假设当我点击特色新闻时,我想更改菜单down.png图标
我知道可以使用input
元素::选中了属性,但不知何故,我做不到
这是我的密码
HTML:
-
特色新闻
-
子1
CSS:
。下拉菜单{
高度:7px!重要;
职位:相对!重要;
左:8px!重要;
顶部:-4px!重要;
右边距:0px!重要;
}
.cd手风琴菜单输入[类型=复选框]:选中。有下拉菜单::后{
内容:“;
宽度:25px;
高度:25px;
背景:url(../img/menu down.png);
背景尺寸:25px;
背景重复:无重复;
位置:相对位置;
显示:内联块;
顶部:4px;
左:24px;
}
.has下拉列表::after{
内容:“;
宽度:15px;
高度:15px;
背景:url(../img/menu down.png);
背景尺寸:15px;
背景重复:无重复;
位置:相对位置;
显示:内联块;
顶部:4px;
左:24px;
}
.cd手风琴菜单{
保证金:自动;
}
.cd手风琴菜单{
/*默认情况下,隐藏所有子菜单*/
显示:无;
}
.cd手风琴菜单{
-webkit用户选择:无;
-moz用户选择:无;
-ms用户选择:无;
用户选择:无;
}
.cd手风琴菜单输入[类型=复选框]{
/*隐藏本机复选框*/
位置:绝对位置;
不透明度:0;
}
.cd手风琴菜单标签.cd手风琴菜单a{
位置:相对位置;
显示:块;
填充:17px 4px 10px 24px;
背景:#ffffff;
颜色:#373737;
字号:18px;
字体系列:“开放式Sans”,无衬线;
字号:600;
字母间距:1px;
}
.no touch.cd手风琴菜单标签:悬停,.no touch.cd手风琴菜单a:悬停{
背景:#52565d;
}
.cd手风琴菜单标签::之前,.cd手风琴菜单标签::之后,.cd手风琴菜单a::之后{
/*图标*/
内容:'';
显示:内联块;
宽度:16px;
高度:16px;
位置:绝对位置;
最高:50%;
-webkit转换:translateY(-50%);
-莫兹变换:translateY(-50%);
-ms转换:translateY(-50%);
-o-变换:translateY(-50%);
转化:translateY(-50%);
}
.cd手风琴菜单img{
最小宽度:自动;
高度:21px;
右边距:18px;
}
.cd手风琴菜单标签{
光标:指针;
}
/*
.cd手风琴菜单标签::之前,.cd手风琴菜单标签::之后{
背景图像:url(../img/cd icons.svg);
背景重复:无重复;
}
*/
.cd手风琴菜单标签::之前{
/*箭头图标*/
左:18px;
背景位置:0;
-webkit变换:translateY(-50%)旋转(-90度);
-moz变换:平移(-50%)旋转(-90度);
-ms变换:平移(-50%)旋转(-90度);
-o变换:平移(-50%)旋转(-90度);
变换:平移(-50%)旋转(-90度);
}
.cd手风琴菜单标签::后{
/*文件夹图标*/
左:41px;
背景位置:-16px 0;
}
.cd手风琴菜单a::之后{
/*图像图标*/
左:36px;
背景:url(../img/cd icons.svg)无重复-48px 0;
}
.cd手风琴菜单输入[类型=复选框]:选中+标签::之前{
/*旋转箭头*/
-webkit转换:translateY(-50%);
-莫兹变换:translateY(-50%);
-ms转换:translateY(-50%);
-o-变换:translateY(-50%);
转化:translateY(-50%);
}
.cd手风琴菜单输入[类型=复选框]:选中+标签::后{
/*如果选中项目,则显示“打开文件夹”图标*/
背景位置:-32px0;
}
.cd手风琴菜单输入[类型=复选框]:选中+标签+ul,
.cd手风琴菜单输入[类型=复选框]:选中+标签:第n个类型(n)+ul{
/*使用label:n类型(n)修复safari上的错误(li:last of type>label,
.cd手风琴菜单>li:类型的最后一个>a,
.cd手风琴菜单>li>ul>li:最后一个类型标签,
.cd手风琴菜单>li>ul>li:最后一个a型{
盒影:无;
}
.cd手风琴菜单ul标签::之前{
左:36px;
}
.cd手风琴菜单ul标签::之后,
.cd手风琴菜单ul a::之后{
左:59px;
}
.cd手风琴菜单ul标签,
.cd手风琴菜单ul a{
左侧填充:68px;
}
.cd手风琴菜单ul标签::之前{
左:54px;
}
.cd手风琴菜单ul标签::之后,
.cd手风琴菜单ul a::之后{
左:77px;
}
.cd手风琴菜单ul标签,
.cd手风琴菜单ul a{
左侧填充:118px;
}
.cd手风琴菜单ul标签::之前{
左:72px;
}
.cd手风琴菜单ul标签::之后,
.cd手风琴菜单ul a::之后{
左:95px;
}
@仅介质屏幕和(最小宽度:600px){
.cd手风琴菜单标签.cd手风琴菜单a{
填充:24px 24px 24px 82px;
字体大小:1.9rem;
}
.cd手风琴菜单标签::之前{
左:24px;
}
.cd手风琴菜单标签::后{
左:53px;
}
.cd手风琴菜单ul标签,
.cd手风琴菜单ul a{
左侧填充:106px;
}
.cd手风琴菜单ul标签::之前{
左:48px;
}
.cd手风琴菜单ul标签::之后,
.cd手风琴菜单ul a::之后{
左:77px;
}
.cd手风琴菜单ul标签,
.cd手风琴菜单ul a{
左侧填充:130像素;
}
.cd手风琴菜单ul标签::之前{
左:72px;
}
.cd手风琴菜单ul标签::之后,
.cd手风琴菜单ul a::之后{
左:101px;
}
.cd手风琴菜单ul标签,
.cd手风琴菜单ul a{
左侧填充:154px;
}
.cd手风琴菜单
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1">
<label for="group-1">
<span class="menu-option-img"><img src="img/menu-cat.png" ></span>
<span class="menu-option-content has-dropdown">Featured News</span>
</label>
<ul>
<li class="has-children">
<input type="checkbox" name ="sub-group-1" id="sub-group-1">
<label for="sub-group-1">
<span class="menu-option-img"><img src="img/menu-cat.png" ></span>
<span class="menu-option-content has-dropdown">Sub 1</span>
</label>
<ul>
<li><a href="#0"><img src="img/menu-cat.png" > Menu 1</a></li>
<li><a href="#0"><img src="img/menu-cat.png" > Menu 2</a></li>
<li><a href="#0"><img src="img/menu-cat.png" > Menu 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
.menu-down {
height: 7px !important;
position: relative !important;
left: 8px !important;
top: -4px !important;
margin-right: 0px !important;
}
.cd-accordion-menu input[type=checkbox]:checked .has-dropdown::after{
content: "";
width: 25px;
height: 25px;
background: url(../img/menu-down.png);
background-size: 25px;
background-repeat: no-repeat;
position: relative;
display: inline-block;
top: 4px;
left: 24px;
}
.has-dropdown::after {
content: "";
width: 15px;
height: 15px;
background: url(../img/menu-down.png);
background-size: 15px;
background-repeat: no-repeat;
position: relative;
display: inline-block;
top: 4px;
left: 24px;
}
.cd-accordion-menu {
margin: auto;
}
.cd-accordion-menu ul {
/* by default hide all sub menus */
display: none;
}
.cd-accordion-menu li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
/* hide native checkbox */
position: absolute;
opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
position: relative;
display: block;
padding: 17px 4px 10px 24px;
background: #ffffff;
color: #373737;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
letter-spacing: 1px;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
/* icons */
content: '';
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-accordion-menu img {
min-width: auto;
height: 21px;
margin-right: 18px;
}
.cd-accordion-menu label {
cursor: pointer;
}
/*
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
background-image: url(../img/cd-icons.svg);
background-repeat: no-repeat;
}
*/
.cd-accordion-menu label::before {
/* arrow icon */
left: 18px;
background-position: 0 0;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
/* folder icons */
left: 41px;
background-position: -16px 0;
}
.cd-accordion-menu a::after {
/* image icon */
left: 36px;
background: url(../img/cd-icons.svg) no-repeat -48px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label::before {
/* rotate arrow */
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
/* show open folder icon if item is checked */
background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
/* show children when item is checked */
display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
background: #fff;
padding-left: 49px;
padding-top: 6px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
box-shadow: none;
}
.cd-accordion-menu ul label::before {
left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
padding-left: 68px;
}
.cd-accordion-menu ul ul label::before {
left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
left: 95px;
}
@media only screen and (min-width: 600px) {
.cd-accordion-menu label, .cd-accordion-menu a {
padding: 24px 24px 24px 82px;
font-size: 1.9rem;
}
.cd-accordion-menu label::before {
left: 24px;
}
.cd-accordion-menu label::after {
left: 53px;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
padding-left: 106px;
}
.cd-accordion-menu ul label::before {
left: 48px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
left: 77px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
padding-left: 130px;
}
.cd-accordion-menu ul ul label::before {
left: 72px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
left: 101px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
padding-left: 154px;
}
.cd-accordion-menu ul ul ul label::before {
left: 96px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
left: 125px;
}
}
.cd-accordion-menu input[type=checkbox]:checked .has-dropdown::after{
content: "";
}
.cd-accordion-menu input[type=checkbox]:checked + label .has-dropdown::after{
content: "";
}