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

Question

[Valery23]

Это радио кнопки вариативного товара Woocommerce. Можно ли как то из такого html кода сверстать что то подобное (как на изображении)?

<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>

Answer 1

[Дмитрий]

Пример

Comments

[Ankhena]

У инпутов есть классы radio-option, а потом пишете дичайшие селекторы типа .radios > li input:disabled ~ label::before
Которые прекрасно заменяются на
.radio-option:checked ~ label
Возможно, у label тоже есть классы.

[Дмитрий]

Ankhena, Это всего лишь пример

[Ankhena]

Дмитрий, потом из этого примера люди просто передирают код.

[Дмитрий]

Ankhena, Увы, так было и будет. Я бы сделал - так, но увы в данном случае так не получиться

[Ankhena]

Дмитрий, так: .radio-option:checked ~ label вполне сошло бы. В вашем варианте при наличии списка, лишний тег span, который можно упростить. Т.е. сама разметка у автора лучше. Не хватает только класса у label.

Answer 2

[Арсений Матыцин]

Для начала, код — невалидное гавно. Смотри сюда, чтобы понять, почему. Кроме прочего, твои label ни к чему не обязывают (оно валидно, но кастрировано).

А ответ да, сделать из этого, как на картинке можно. Приводишь в чувство верстку, скрываешь стилями input, делаешь декоративный список, и по селекторам уже ваяешь обвес для выбранного, деактивированного и т.д.

Comments

[Valery23]

Ну по поводу невалидного кода, я бы посмотрел на то как вы спорите с разработчиками woocomerce, так как он автоматически генерируется. Просто остальные атрибуты я почистил, что бы проще было и понятнее. Так как они на верстку не влияют.

[profesor08]

Valery23, боюсь, разработчики woocomerce ударятся в краску. label должен указывать на инпут, либо инпут должен быть внутри, но label просто расположился за инпутом, смысла в нем никакого и функциональности он не несет. Я ожидаю, что кликая на label, будет отмечен нужный инпут, но этого не произойдет. Возможно это все заговнокожено на jquery (так и есть). Но скорее всего, это просто ошибка генерации шаблона, может поправят, может нет.

[Арсений Матыцин]

profesor08, решения в битриксе, к примеру, не лучше. Гавнокод гавнокодом погоняет.

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

[Арсений Матыцин]

Valery23, это называется захардкодили дерьмо на JS и подперли костылями. Такое в гавнофреймворках и гавноцмсках сплошь и рядом.

К тому же проект с открытым исходным кодом. Ты и сам можешь сходить в гитхаб и предложить им решение более адекватное. Не исключено, что таким образом этот плевок в лицо верстальщику и появился.

[profesor08]

Арсений Матыцин, это все тянется багажом, отказаться не могут, так как сломают совместимость со всеми модулями и плагинами, которые наштампованы сообществом.

[Арсений Матыцин]

profesor08, да знаю я про обратную совместимость. Но от этого разве лучше? Там, кстати, менее как месяц назад накатали новую версию. Поднятие мажорки не обязывает никак к обратной совместимости, может пофиксили (сомневаюсь).

[profesor08]

Арсений Матыцин, не слежу, так как не пользуюсь ни тем, ни тем.

[Арсений Матыцин]

profesor08, ссылка была выше, вкладка соседняя. Следить не обязательно.

[art style]

profesor08, как я люблю читать такое)) да может это и не эталон чистоты кода, но это работает и отображается нормально. никто из юзеров и потребителей не увидит этого говнокода и проблем с использованием тоже не почувствует. стало быть это лишь топливо для бурления говн среди разработчиков которая никак на юзабилити не отражается

[Арсений Матыцин]

art style, к сожалению ты невнимательно прочитал как вопрос, так и ответы. Иными словами обосрался.

Но у тебя есть шанс реабилитироваться (нет). Скопируй данный код к себе в редактор и посмотри, будет ли он работать так, как ожидает автор вопроса.

Открою маленький секрет — работать не будет. Почему? Смотри в ответах.

[profesor08]

art style, тогда откуда столько заказов и вопросов повсюду, что сайт на вп+вукомерц открывается через 10, 20, 30 секунд? Или почему не работает то, не работает это, отвалилось, прицепилось?

[art style]

profesor08, много факторов тут, и сервер и софт для сервера, люди любят все поставить на хостинг за 100 рублей а потом ныть что все лагает... для хобби магазина с 10-20 позиций я думаю woocommerce идеальный вариант и на vps за 3$ лагать не будет. делать магаз с 1000 и 10000 позиций на woocommerce изначально глупо. для этого есть другой софт

[profesor08]

art style, почему же глупо? Дернуть тысячу записей и вывести для них html это тривиальная задача. Но там для каждой записи, выполняется еще запрос, а потом еще, и еще. И если с парой десятков сайт работает +- сносно, то при тысяче он сдохнет. Запросов к базе в цикле быть не должно, это все можно сделать одним.

Answer 3

[profesor08]

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