如何使用CSS在选择框处于活动状态时更改箭头旋转

Question

基本上，当我使用css完成设计部分时，当我想添加"在"；以及"；活动的"；选项；箭头"；以及"；菜单"；更改时选择框是活动的，我有一些问题，当我添加"；活动的"；对于浏览器中的类名，箭头应该旋转，但什么也没发生
HTML

<div class="custom_select_box_1_index">
<ul id="DefaultCategoryIndex"class="default_option_category_index">
<li>
<div class="option_allcategories">
<p>All Categories</p>
<i id="ArrowCategoryIndex" class="fa fa-chevron-up"></i>
</div>
</li>
</ul>
<ul id="OptionsCategoryIndex" class="select_option_category_index">
<li>
<div id="CategoryObjects" class="option objects">
<div class="icon"><i id="icon" class="fas fa-cube"></i></div>
<p class="category_text">Objects</p>
</div>
</li>
<li>
<div id="CategoryVehicules" class="option vehicules">
<div class="icon"><i id="icon" class="fas fa-car"></i></div>
<p class="category_text">Vehicules</p>
</div>
</li>
<li>
<div id="CategoryTechnology" class="option technology">
<div class="icon"><i id="icon" class="fas fa-mobile"></i></div>
<p class="category_text">Technology</p>
</div>
</li>
<li>
<div id="CategoryBooks" class="option books">
<div class="icon"><i id="icon" class="fas fa-book"></i></div>
<p class="category_text">Books</p>
</div>
</li>
<li>
<div id="CategoryGaming" class="option gaming">
<div class="icon"><i id="icon" class="fas fa-gamepad"></i></div>
<p class="category_text">Gaming</p>
</div>
</li>
<li>
<div id="CategoryOther" class="option other">
<div class="icon"><i id="icon" class="fas fa-ellipsis-h"></i></div>
<p class="category_text">Other...</p>
</div>
</li>
</ul>
</div>

CSS:

.custom_select_box_1_index{
font-family: Helvetica;
font-size: 19px;
color: var(--second-black);
box-sizing: content-box;
width: 250px;
height: 50px;
}

.custom_select_box_1_index > ul li{
list-style: none;
}

.custom_select_box_1_index .default_option_category_index:before{
content: "";
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;
background-color: var(--white);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
cursor: pointer;
transform: rotate(180deg);
color: var(--black);
position: absolute;
margin-left: 170px;
margin-top: -39px;
cursor: pointer;
}

.custom_select_box_1_index .select_option_category_index{
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
z-index: 1;
display: none
}

.select_option_category_index li{
position: relative;
margin-left: -38px;
background-color: var(--white);
border-radius: 10px;
width: 230px;
padding: 3px 8px;
cursor: pointer;
}

.custom_select_box_1_index .select_option_category_index li:hover{
background: var(--grey);
}

.category_text{
position: relative;
left: 30px;
}

.custom_select_box_1_index .option{
display: flex;
align-items: center;
}

.icon{
display: flex;
align-items: center;
margin-left: 15px;
}

#icon{
color: var(--black);
}

.custom_select_box_1_index:active .select_option_category_index{
display: block;
}

.custom_select_box_1_index:active .default_option_category_index:before{
transform: rotate(0deg);
}

当选择栏处于活动状态时，我希望箭头旋转回0deg(不使用JavaScript(。

Answer 1

您可以利用CSS相邻的同级选择器+:

.custom_select_box_1_index {
font-family: Helvetica;
font-size: 19px;
color: var(--second-black);
box-sizing: content-box;
width: 250px;
height: 50px;
}
.custom_select_box_1_index>ul li {
list-style: none;
}
.custom_select_box_1_index .default_option_category_index:before {
content: "";
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;
background-color: var(--white);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
transform: rotate(180deg);
color: var(--black);
position: absolute;
margin-left: 170px;
margin-top: -39px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index {
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
z-index: 1;
display: none
}
.select_option_category_index li {
position: relative;
margin-left: -38px;
background-color: var(--white);
border-radius: 10px;
width: 230px;
padding: 3px 8px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index li:hover {
background: var(--grey);
}
.category_text {
position: relative;
left: 30px;
}
.custom_select_box_1_index .option {
display: flex;
align-items: center;
}
.icon {
display: flex;
align-items: center;
margin-left: 15px;
}
#icon {
color: var(--black);
}
.custom_select_box_1_index:active .select_option_category_index {
display: block;
}
.custom_select_box_1_index:active .default_option_category_index:before {
transform: rotate(90deg);
}
.option_allcategories p:active+.fa-chevron-up {
transform: rotate(180deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="custom_select_box_1_index">
<ul id="DefaultCategoryIndex" class="default_option_category_index">
<li>
<div class="option_allcategories">
<p>All Categories</p>
<i id="ArrowCategoryIndex" class="fa fa-chevron-up"></i>
</div>
</li>
</ul>
<ul id="OptionsCategoryIndex" class="select_option_category_index">
<li>
<div id="CategoryObjects" class="option objects">
<div class="icon"><i id="icon" class="fas fa-cube"></i></div>
<p class="category_text">Objects</p>
</div>
</li>
<li>
<div id="CategoryVehicules" class="option vehicules">
<div class="icon"><i id="icon" class="fas fa-car"></i></div>
<p class="category_text">Vehicules</p>
</div>
</li>
<li>
<div id="CategoryTechnology" class="option technology">
<div class="icon"><i id="icon" class="fas fa-mobile"></i></div>
<p class="category_text">Technology</p>
</div>
</li>
<li>
<div id="CategoryBooks" class="option books">
<div class="icon"><i id="icon" class="fas fa-book"></i></div>
<p class="category_text">Books</p>
</div>
</li>
<li>
<div id="CategoryGaming" class="option gaming">
<div class="icon"><i id="icon" class="fas fa-gamepad"></i></div>
<p class="category_text">Gaming</p>
</div>
</li>
<li>
<div id="CategoryOther" class="option other">
<div class="icon"><i id="icon" class="fas fa-ellipsis-h"></i></div>
<p class="category_text">Other...</p>
</div>
</li>
</ul>
</div>