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 >
  <div >
      <select disabled>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <button ></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.

CodePudding user response：

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 >
  <div >
    <select disabled>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <button ></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 >
  <div >
    <select disabled>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <button ></button>
    <span ></span>
  </div>
</div>