How to change arrow rotation when select box is active using CSS - html

Question

Basically, i'm creating a custom select box when i finished the design part using css and when i wanted to add the "before" and "active" options so that the "arrow" and "menu" changes when the select box is active, I had some problems, when i add "active" to the class name in the browser the arrow is supposed to rotate but nothing happens instead.
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);
}
I want the arrow to rotate back to 0deg when the select bar is active (without using JavaScript).

Answer 1

You can leverage the CSS adjacent sibling selector +:
.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>