我有一個帶有重置樣式的選擇，并嘗試使用::after選擇器和在內部創建額外的按鈕和下拉箭頭圖示content。現在我正在嘗試設定選擇的樣式以防disabled應用它。對于按鈕盒，我使用select:disabled button.resetDropdownButton::after. 但是，我仍然找不到在禁用選擇時重新設定箭頭圖示樣式的方法。有人知道怎么做嗎？

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>

我希望我::after在 div 包裝器上使用創建的箭頭圖示可以在選擇禁用時像按鈕一樣重新設定樣式。

uj5u.com熱心網友回復：

保持相同的 HTML 結構

這可以通過.filterItem:has(select:disabled)::after. 但是選擇器:has()目前還沒有得到很好的支持。你可以閱讀更多。

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>

更改 HTML 結構

您可以更改 HTML 結構并.filterItem在選擇內和選擇后包含箭頭，同時還可以應用一些 CSS 使其看起來不錯。
到目前為止，這是更好的和更多的支持。
是這樣的：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534722.html

標籤：网页格式CSS

上一篇：如何根據視口寬度更改此布局？

下一篇：在Tailwinds居中彈性列中左對齊內容

禁用選擇時的樣式圖示和按鈕

保持相同的 HTML 結構

更改 HTML 結構