CSS - цвет фона на проверенном радио - PullRequest
Новая
       5

CSS - цвет фона на проверенном радио

0 голосов
/ 05 сентября 2018

Я застрял с этим кодом. Я хочу изменить цвет фона 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>

Заранее спасибо.

Ответы [ 6 ]

0 голосов
/ 06 сентября 2018

Использование ванильного 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>
0 голосов
/ 06 сентября 2018 
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

0 голосов
/ 06 сентября 2018

Полагаю, вам нужно изменить цвет родительского элемента 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>

Надеюсь, это то, что вам нужно.

UPDATE

Еще одно решение JavaScript - проверять радио, когда вы щелкаете по родительскому элементу <li>. Я думаю, что это более дружественный интерфейс. 

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>
0 голосов
/ 06 сентября 2018

Поскольку @ kevin-lewis уже упоминал, что в css нет родительских селекторов, чтобы иметь чистое решение css, нам нужно немного обмануть с помощью стилизации тега <label>, чтобы он заполнил весь родительский элемент. <li> элемент (с использованием абсолютного позиционирования) и имеет те же поля и границы. Единственный неудобный бит, который может не работать надежно, это левый отступ стиля <label> - он должен учитывать ширину переключателя - отсюда и "волшебный" 2.6em. 

.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;
}
<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>
0 голосов
/ 05 сентября 2018

Добавить :checked для радио в css и 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>
0 голосов
/ 05 сентября 2018

Использовать клики для каждого радиоэлемента 

<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';
  }
}
...