@Valery23

Как сверстать Radio Buttons?

Это радио кнопки вариативного товара Woocommerce. Можно ли как то из такого html кода сверстать что то подобное (как на изображении)?
5e82676e93ef8716101555.png
<div id="picker_pa_razmernyj-ryad">

<ul id="radio_select_pa_razmernyj-ryad5e8265a474230">
    <li>
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_36">
        <label>36</label>
    </li>
    <li class="disabled">
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_37" disabled="disabled">
        <label>37</label>
    </li>
    <li>
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_38">
        <label>38</label>
    </li>
    <li>
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_39">
        <label>39</label>
    </li>
    <li>
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_40">
        <label>40</label>
    </li>
    <li class="disabled">
        <input class="radio-option" id="radio_pa_razmernyj-ryad5e8265a474230_41" disabled="disabled">
        <label>41</label>
    </li>
</ul>

</div>
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
@soledar10
html css3 js jquery
Пригласить эксперта
Ответы на вопрос 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Для начала, код — невалидное гавно. Смотри сюда, чтобы понять, почему. Кроме прочего, твои label ни к чему не обязывают (оно валидно, но кастрировано).

А ответ да, сделать из этого, как на картинке можно. Приводишь в чувство верстку, скрываешь стилями input, делаешь декоративный список, и по селекторам уже ваяешь обвес для выбранного, деактивированного и т.д.
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Конкретно приведенный html код можно облагородить с помощью css таким образом, чтоб получить результат, идентичный тому, что на картинке.
1. label расположить относительно li абсолютом по центру.
2. отключить системное отображение инпута (appearance: none;) и придать ему нужный вид с рамкой.
3. с помощью селекторов :checked и ~ label стилизовать инпут и лабел соответственно состоянию, для :disabled аналогично.
4. для лабел задать псевдоэлемент нужной высоты и достаточной ширины чтоб была не меньше диагонали контейнера, расположить абсолютом по центру и повернуть на -45deg и задать z-index: -1 чтоб текст не перекрывался.
5. Если плоска вылезает за границы, задать li overflow hidden
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы