選中或懸停無線電時更改無線電容器的樣式

當單擊或懸停無線電選項時，我需要更改 2 個無線電容器的樣式

.gchoice_1_15_0, .gchoice_1_15_1 {
    width: 48%;
    color: #58595B;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    padding-left: 1em;
    background: #fff;
    transition: all ease-in-out .3s;
    box-shadow: none;
}

//Yes option
<div class="gchoice gchoice_1_15_0">
        <input class="gfield-choice-input" name="input_15" type="radio" value="Yes" id="choice_1_15_0" onchange="/*gformToggleRadioOther( this )*/">
        <label for="choice_1_15_0" id="label_1_15_0">Yes</label>
</div>

//No option
<div class="gchoice gchoice_1_15_1">
        <input class="gfield-choice-input" name="input_15" type="radio" value="No" id="choice_1_15_1" onchange="/*gformToggleRadioOther( this )*/">
        <label for="choice_1_15_1" id="label_1_15_1">No</label>
</div>

選中或懸停任何選項后，我需要更改正確容器的樣式：

如果選中“是”選項，請將 .gchoice_1_15_0 更改為

background: #EF8B22;
border: 1px solid #EF8B22;
box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);

如果選中“否”選項，請將 .gchoice_1_15_1 更改為

background: #EF8B22;
border: 1px solid #EF8B22;
box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);

我試過這個 CSS 但沒有用：

#choice_1_15_0:checked ~ .gchoice_1_15_0 {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}

我怎樣才能做到這一點？

PD。無法修改 HTML 代碼。

uj5u.com熱心網友回復：

問題：

我試過這個 CSS 但沒有用：

• 它不起作用，因為 CSS 選擇器是“僅向前”的。

  • CSS 選擇器中的~和 組合器不能根據后代元素或下一個兄弟元素的屬性或 DOM 狀態選擇元素。
  • 相反：它只能根據元素的祖先和前兄弟元素的屬性和 DOM 狀態來選擇元素。
  • 實際上， 組合子的意思不是“相鄰兄弟”，而是“下一個相鄰兄弟”，~也不是“任何兄弟”，而是“任何未來的兄弟”。

• 在您的情況下：CSS 選擇器不能使用選擇時的:checked狀態...<input id="choice_1_15_0" /><div >

  • ...但 CSS可以使用它來選擇<label for="choice_1_15_0">.

CSS 選擇器以這種方式作業有多種原因，主要是性能：應用具有這些限制性只進規則的CSS 規則的演算法比它必須支持任何型別的“向后和向上”規則更簡單和更快.

也就是說，我所指的實際上是由網路瀏覽器支持的：它被稱為:has()關系選擇器，但是由于這些性能原因，它在 CSS 樣式表中不受支持，僅在 DOMquerySeletor和querySelectorAll函式中受支持：

我注意到，自 2021 年以來，一些（非 Google）Chrome 開發人員正在研究嘗試在 Chrome 中實作對有限型別子選擇器的支持的方法:has()，請在此處閱讀：https : //css-has.glitch.me/ - 但我懷疑對此的支持是否會進入 Chrome 多年，更不用說其他瀏覽器引擎，如 Safari 和 Firefox。

理想的解決方案：:has()選擇器：

如果我們可以使用:has()，那么您可以這樣做并稱它為一天：

label[for]:has(input[type=radio]:checked) {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}

不幸的是他們沒有，所以我們不能這樣做。

解決方法：移動您的<input/>元素：

解決方法是將您的位置提升<input/>到其容器的上方和之前 - 但由于您不希望復選框小部件在視覺上位于那里，因此您需要使輸入不可見并使用替換復選框影像<label>或者使用 CSS 技術來重新定位呈現的輸入元素，也許使用 CSSgrid或flex（甚至position），但這些并沒有給你很大的靈活性。

您還可以使用::before添加假復選框/單選按鈕（使用美觀的 SVG 或 PNG as background-image，或使用 CSSborder直接渲染框）。

像這樣的東西：

input  { display: none; }
 
 .gchoice_1_15_0,
 .gchoice_1_15_1 {
      width: 48%;
      color: #58595B;
      border: 1px solid #E4E4E4;
      border-radius: 10px;
      padding-left: 1em;
      background: #fff;
      transition: all ease-in-out .3s;
      box-shadow: none;
}

#choice_1_15_0:checked ~ * label[for="choice_1_15_0"],
#choice_1_15_1:checked ~ * label[for="choice_1_15_1"] {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}

/* CSS-only radio buttons: */
label::before {
    display: inline-block;
    content: ' ';
    background: white;
    border: 1px solid black;
    border-radius: 7px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
}

#choice_1_15_0:checked ~ * label[for="choice_1_15_0"]::before,
#choice_1_15_1:checked ~ * label[for="choice_1_15_1"]::before {
    background: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 40%);
}

<input class="gfield-choice-input" name="input_15" type="radio" value="Yes" id="choice_1_15_0" onchange="/*gformToggleRadioOther( this )*/">

<input class="gfield-choice-input" name="input_15" type="radio" value="No" id="choice_1_15_1" onchange="/*gformToggleRadioOther( this )*/">

//Yes option
<div class="gchoice gchoice_1_15_0">
   <label for="choice_1_15_0" id="label_1_15_0">Yes</label>
</div>

//No option
<div class="gchoice gchoice_1_15_1">
    <label for="choice_1_15_1" id="label_1_15_1">No</label>
</div>

標籤：javascript html 查询 css

上一篇：理解jQuery偏移方法中的代碼片段

下一篇：選中復選框時如何更改復選框的字體真棒