After completing the design aspect of creating a custom select box using CSS, I encountered some difficulties while attempting to add the "before" and "active" options. The goal was for the "arrow" and "menu" to change when the select box is active. However, when I added "active" to the class name in the browser, the arrow was supposed to rotate but nothing happened 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">Vehicles</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 am aiming for the arrow to rotate back to 0 degrees when the select bar is active (avoiding the use of JavaScript).