CSS-选中的收音机上的li背景色

Question

我坚持使用此代码。当选择相应的单选按钮时，我想更改li的背景颜色。请参阅随附的小提琴以获取演示。

是否可以不编辑原始的html而这样做，因为它是由我真的不想编辑的核心文件生成的？

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" name="wc_deposit_option" value="yes" id="wc- 
    option-pay-deposit">
      <label for="wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type="radio" name="wc_deposit_option" value="no" id="wc-option- 
    pay-full" checked="checked">
      <label for="wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

先谢谢了。

Answer 1

由于@ kevin-lewis已经提到过，css中没有父选择器，为了拥有纯CSS解决方案，我们需要对__manifest__.py标签进行样式化以使其填充整个父项<label>元素（使用绝对定位），并且具有相同的边距和边界。唯一可能无法可靠工作的奇怪位是样式为<li>的左填充-它必须考虑单选按钮的宽度-因此是“魔术” 2.6em。

<label>

.wc-deposits-wrapper .wc-deposits-option li {
    padding: .5em 1em;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    border-radius: 4px;
    box-sizing: border-box;
    width: 49%;
    margin: 0;
    float: left;
    position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
    list-style: none outside;
    margin: 0;
    padding: 0 0 2px;
    overflow: hidden;
    font-size: 1em;
    line-height: 2em;
}

input:checked + label{
    display: inline-block;
    background-color: DodgerBlue;
    height: 100%;
    width: 100%;
    z-index: -1;
    padding: .5em 1em;
    padding-left: 2.6em;
    border: 1px transparent;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

Please review solution link below. I used javascript to fixed this problem.

I hope this answer will be helpful for you

https://codepen.io/dev_aman/pen/YOxjpR

Answer 3

对每个单选元素使用onclicks

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc- 
option-pay-deposit">
        <label for="wc-option-pay-deposit">
Option 1    </label>
    </li>
    <li>
      <input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option- 
pay-full" checked="checked">
        <label for="wc-option-pay-full">
Option 2    </label> 
    </li>
   </ul>
</div>

然后使用以下js代码：

function toggleBackground(type) {
  if(type) {
    document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
    document.getElementById('wc-option-pay-full').style.background = 'color-2';
  } else {
    document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
    document.getElementById('wc-option-pay-full').style.background = 'color-1';
  }
}

Answer 4

为CSS和:checked中的广播添加background-color: #ff0000;

Test

.wc-deposits-wrapper .wc-deposits-option li {
    padding: .5em 1em;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    border-radius: 4px;
    box-sizing: border-box;
    width: 49%;
    margin: 0;
    float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
    list-style: none outside;
    margin: 0;
    padding: 0 0 2px;
    overflow: hidden;
    font-size: 1em;
    line-height: 2em;
}

input[type=radio]:checked + label {
  background-color: #ff0000;
  font-style: normal;
} 

input[type=radio] + label {
  color: #ccc;
  font-style: italic;
} 

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
        <label for="wc-option-pay-deposit">
Option 1</label>
    </li>
    <li>
      <input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
        <label for="wc-option-pay-full">
Option 2</label> 
    </li>
   </ul>
</div>

Answer 5

我想您需要更改父级li的颜色。在这种情况下，这就是我的做法。

let imps = Array.from(
  document.querySelectorAll(".wc-deposits-option [type='radio']")
);

imps.map((r) => {
  r.addEventListener("change", () => action(r));
  window.onload = (() => action(r));
});


function action(r){
// this function is called when the window loads & when a radio button is clicked
  imps.map( R => {R.parentElement.style.background = "white";})
  
    if (r.checked) {
      r.parentElement.style.background = "gold";
  } 
}

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" name="wc_deposit_option" value="yes" id="wc- 
    option-pay-deposit">
      <label for="wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type="radio" name="wc_deposit_option" value="no" id="wc-option- 
    pay-full" checked="checked">
      <label for="wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

我希望这是您所需要的。

更新

另一个JavaScript解决方案是单击<li>父母时检查广播。我认为这对UI更友好。

let lis = Array.from(
  document.querySelectorAll(".wc-deposits-option li")
);

lis.map((li) => {
  li.addEventListener("click", () => action(li));
  window.onload = (() => action(li));
});

function action(li){
  lis.map((_li) => {_li.style.background = "white"});
  let thisRadio = li.querySelector("[type='radio']");
    thisRadio.checked = true;
    li.style.background = "gold"
}

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" name="wc_deposit_option" value="yes" id="wc- 
    option-pay-deposit">
      <label for="wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type="radio" name="wc_deposit_option" value="no" id="wc-option- 
    pay-full" checked="checked">
      <label for="wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>

Answer 6

使用原始JavaScript：

function toggleItem ( input )
{
  input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}

function toggleOptions ()
{
  let 
    list = document.querySelector( '.wc-deposits-option' ),
    checked = list.querySelector( 'input:checked' );
    
  toggleItem( checked );
  
  list.addEventListener( 'input', () => {
  
    let target = event.target;
    
    toggleItem( target );
    toggleItem( checked );
    
    checked = target;
  
  });
}

toggleOptions();

.wc-deposits-wrapper .wc-deposits-option li {
  padding: .5em 1em;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border-radius: 4px;
  box-sizing: border-box;
  width: 49%;
  margin: 0;
  float: left;
}

.wc-deposits-wrapper .wc-deposits-option {
  list-style: none outside;
  margin: 0;
  padding: 0 0 2px;
  overflow: hidden;
  font-size: 1em;
  line-height: 2em;
}

.wc-deposits-option-checked
{
  background-color: #00F;
}

<div class="wc-deposits-wrapper wc-deposits-optional">
  <ul class="wc-deposits-option">
    <li>
      <input type="radio" name="wc_deposit_option" value="yes" id="wc- 
    option-pay-deposit">
      <label for="wc-option-pay-deposit">
    Option 1    </label>
    </li>
    <li>
      <input type="radio" name="wc_deposit_option" value="no" id="wc-option- 
    pay-full" checked="checked">
      <label for="wc-option-pay-full">
    Option 2    </label>
    </li>
  </ul>
</div>