Styling icon and button when select is disabled - html

Question

I have a select with reset style and trying to create additional button and dropdown arrow icon inside using ::after selector and content. And now I'm trying to style the select in case of disabled applied on it. For the button case, I change the style by using select:disabled + button.resetDropdownButton::after. However, I still can't find the way to re-style the arrow icon when select is disabled. Anyone know how to do it?
select, option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select > option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled + button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled + button.resetDropdownButton:hover {
text-decoration: none;
}
select:disabled + filterItem::after {
/*add arrow down from fa-icon*/
color: yellow;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
</div>
</div>
I expect the arrow icon that I create using ::after on the div wrapper can be restyle like the button one when select disabled.

Answer 1

Keeping the same HTML structure
This can be achieved with .filterItem:has(select:disabled)::after. But selector :has() is not well supported so far. You can read more.
select,
option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select>option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled+button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled+button.resetDropdownButton:hover {
text-decoration: none;
}
.filterItem:has(select:disabled)::after {
/*add arrow down from fa-icon*/
color: gray;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
</div>
</div>
Change HTML structure
You can change the HTML structure and include the arrow inside your .filterItem and after the select, while also applying some CSS to make it look good.
This is better and more supported so far.
Something like this:
select,
option {
-webkit-appearance: none;
}
button.resetDropdownButton::after {
content: "\2716";
}
.filterWrapper {
/* flex: 1;*/
margin: 0 1rem 1rem;
position: relative;
}
.filterWrapper label {
display: block;
margin-bottom: .25rem;
}
.filterItem {
position: relative;
}
.filterItem select {
width: 100%;
/*padding: 0.5rem 1rem;*/
padding-right: 2rem;
padding-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1rem;
border-radius: 6px;
border: 2px solid #CBD2E0;
transition: .2s all;
cursor: pointer;
}
.filterItem select::-webkit-input-placeholder {
color: var(--grey);
}
.filterItem select:focus {
outline: none;
background-color: rgba(214, 238, 247, 0.5);
border: 1px solid var(--blue);
box-shadow: 0 0 3px var(--blue);
}
.filterItem select>option {
border-radius: 10px;
}
.filterWrapper .resetDropdownButton {
position: absolute;
top: auto;
right: 1.15rem;
bottom: .5rem;
background-color: transparent;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
/* font-weight: bold;*/
border: 0 solid transparent;
cursor: pointer;
}
.filterWrapper .resetDropdownButton:hover {
text-decoration: underline;
}
select:disabled+button.resetDropdownButton::after {
color: gray;
opacity: 0.7;
}
select:disabled+button.resetDropdownButton:hover {
text-decoration: none;
}
.arrow::after {
/*add arrow down from fa-icon*/
content: '\f107';
font: normal normal normal 12px/1 FontAwesome;
color: black;
right: 8px;
top: -2px;
height: 26px;
padding: 15px 0px 0px 8px;
position: absolute;
pointer-events: none;
}
select:disabled + button.resetDropdownButton + span.arrow::after {
color: gray;
opacity: 0.7;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<div class="filterWrapper">
<div class="filterItem">
<select disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button class="resetDropdownButton"></button>
<span class="arrow"></span>
</div>
</div>