Пользовательский стиль переключателя для нескольких запросов - PullRequest
Новая
       28

Пользовательский стиль переключателя для нескольких запросов

0 голосов
/ 09 июля 2019

По сути, я пытаюсь создать свой собственный компонент переключателя для повторного использования и повторного использования, но я изо всех сил пытаюсь заставить кнопки правильно работать со стилем. Если вы выберете кнопку во втором наборе, она не будет реагировать должным образом, даже если каждый набор имеет свое свойство name. Если я избавлюсь от пользовательского стиля, он будет работать нормально.

Я думаю, что это как-то связано с этим, но не нашел решения: 

.radio-custom {
    opacity: 0;
    position: absolute; 
}

Вот мой кодовый блок:

https://codepen.io/Sbphillips19/pen/XLyzzN

HTML: 

  <form>
        <h2>Radio Button Prompt 1</h2>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>
      </div>



 <h2>Radio Button Prompt 2</h2>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group-2" type="radio">
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group-2" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group-2" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>
      </div>
    </form>

и CSS: 

.radio-custom {
    opacity: 0;
    position: absolute; 
}

.radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: white;
    border: 2px solid #888888;
    display: inline-block;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
  border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #444444;
    box-shadow: inset 0px 0px 0px 6px #fff;
}

1 Ответ

1 голос
/ 09 июля 2019

Проблема с атрибутом id, который должен быть уникальным!

Измените следующую вторую часть html на эту, и она будет работать:

Рабочий пример: https://codepen.io/jo-o-teixeira-the-sasster/pen/agQErM

Запрос кнопки радио 2 

<div>
        <input id="radio-4" class="radio-custom" name="radio-group-2" type="radio">
        <label for="radio-4" class="radio-custom-label">First Choice</label>
    </div>
    <div>
        <input id="radio-5" class="radio-custom"name="radio-group-2" type="radio">
        <label for="radio-5" class="radio-custom-label">Second Choice</label>
    </div>
    <div>
        <input id="radio-6" class="radio-custom" name="radio-group-2" type="radio">
        <label for="radio-6" class="radio-custom-label">Third Choice</label>
    </div>
  </div>
...