Как мне сделать такую же форму, как на этой картинке для сортировки зданий?

Question

[Andrew Ruwz]

Как мне сделать такую же radio-форму, как на этой картинке?

Comments

[12Vadim12]

При нажатие оранжевый кружечек появляется в квадратной рамке?

[Andrew Ruwz]

12Vadim12, нет, это 2 формы тип которых radio, которая должна фильтровать некие данные.

Answer 1

[12Vadim12]

<input class='x' id="for-gender1">
<label class='y' for="for-gender1"></label>

.x{
  appearance: none;
  outline: none;
  position: relative;
   &::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left:-17px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #D1D5DB;
  }
  &:checked::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left:-17px;
  border-radius: 50%;
  visibility: visible;
  border: 4px solid $color1;
}

Задай свои стили только, а label(вторую радиокнопку ,сделай псевдоэлементами в похожем стиле)

Comments

[Ankhena]

input одиночный тег у него нет закрывающего тега и псевдоэлементов тоже.

[Михаил Flat]

Ankhena, а ты попробуй закрыть его, и увидишь что кто-то не шарит нифига...

[Ankhena]

Михаил Flat, надо объяснять? Хорошо.

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

Но с таким кодом нет никакой гарантии, что так будет всюду и всегда, пока не будет включено в спеку (да и потом, как вы, наверное, знаете, не факт)

Также нет гарантии, что это навсегда останется в коде, что другой разработчик или даже линтер не исправит ошибку.

Я не возражаю против костылей в принципе.
Но псевдо элементарно переставляется в label (или в span, при желании оборачивать инпут в лейбл) и не вызывает никаких проблем.

А ещё, часто вопросы тут задают новички, которые несут этот код прямиком в портфолио и на собеседование. Чем сразу снижают себе баллы.

[Михаил Flat]

Ankhena, Бла Бла Бла, ещё скучнее можно было?
Спека не спека, вы ещё w3c юзайте как УК РФ.
Выше написано: "нет закрывающего, нет псевдо".
Ответ: "есть".

[Ankhena]

Михаил Flat, в дырявых носках тоже можно ходить. Если вы сознательно именно так себя позиционируете, воля ваша.

Аргументы писала для новичков, которые не отличают хорошие практики от плохих.

[Михаил Flat]

Ankhena, иногда нет возможности по проекту сделать все правильно.
Новечкам будет полезно знать и обходы этих ситуаций.
Если к вёрстке доступ закрыт, но по какой-то причине input закрыт, а в арсенале только каскадная таблица, то это выручит кого-то.
Более того, о таком методе не пишут везде, и найти инфу становиться сложно как же решить проблему.
Дырявые носки это весело конечно, но скажите это человеку без носков вовсе.

Поэтому спуститесь с пьедестала отличника и подумайте о всех ситуациях.

[Ankhena]

Михаил Flat, расскажу о :has, который вот-вот ;)

Поэтому спуститесь с пьедестала отличника и подумайте о всех ситуациях.

Без понятия как там, никогда не была отличницей.

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

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

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

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

[Михаил Flat]

Господи, да тише ты, это же дичь, читать долго и больно...