Расширенный стиль флажка с помощью CSS Grid
Модуль CSS Grid Layout может решить не только мамонта проблемы макета, но и некоторые старые добрые проблемы, которые мы иметь дело с в течение длительного времени, такие как стиль метки флажка.
Хотя есть относительно простой способ стилизовать метку, когда она появляется после флажок, это не так просто, когда появляется ярлык до Это.
Флажок без CSS-сетки
Стилизация этикетки после флажок - это то, чем занимаются разработчики с тех пор, как мы где-то читали об этом. Этот метод является одним из главных и старых примеров мощной динамики, которой может обладать CSS.
Вот код, с которым вы уже можете быть знакомы, стилистическая этикетка после проверенный флажок:
вход: проверено + метка / * стиль меня * /
стиль этикетки после флажок может выглядеть так (однако вы можете использовать и другие правила стиля):
Приведенный выше код CSS использует соседний братский комбинатор отмечен + ключ. Когда флажок находится в : проверено государство, элемент после Это (обычно метка) можно стилизовать с помощью этого метода.
Такая простая и эффективная техника! Что могло возможно пойти не так с этим? Ничего - пока не захочешь отобразить ярлык до флажок.
Соседний братский комбинатор выбирает следующий элемент; это означает, что этикетка должна прийти после флажок в исходном коде HTML.
Итак, чтобы появился ярлык до флажок принадлежности на экране, мы не можем просто переместить его перед флажком в исходном коде, как предыдущий селектор брата не существует в CSS.
Что оставляет только один вариант: изменить положение флажка и метки с помощью преобразование или же позиция или же поле или другое свойство CSS с некоторой телекинетической силой, так что метка появляется слева от флажка на экране.
Проблемы с традиционным методом
Там нет ничего главно не так с вышеупомянутой техникой, но это может быть неэффективен в некоторых случаях. Я имею в виду случаи, когда переставленные позиции флажка и метки больше не работают.
Думай отзывчивым, например. Возможно, вам придется изменить размер или переместить флажок в соответствии с устройством, на котором он отображается. Когда это произойдет, вы будете необходимо изменить положение этикетки, поскольку в ответ на изменение положения / изменения размера флажка не будет произведено автоматическое изменение метки.
Мы можем устранить этот недостаток, если мы могли бы просто обеспечить некоторую твердую разметку для флажка и метки, вместо того, чтобы грубо разместить их на странице.
Но почти все системы разметки, такие как таблицы или столбцы, требуют от вас добавить метку перед флажком в исходном коде чтобы он выглядел одинаково на экране. Это то, что мы не хотим делать, потому что следующий селектор элемента на метке перестанет работать.
CSS Grid, с другой стороны, является системой макетов, которая не зависит от размещения / порядка элементов в исходном коде.
Возможности изменения порядка расположения сетки намеренно влияют только визуальный рендеринг, оставляя речевой порядок и навигацию на основе исходного порядка. Это позволяет авторам манипулировать визуальным представлением, оставляя исходный порядок без изменений ... - CSS Grid Layout Module Уровень 1, W3C
Таким образом, CSS-сетка является идеальным решением для стиль этикетки, которая появляется до флажок.
Флажок с помощью CSS Grid
Давайте начнем с HTML-кода. Порядок флажка и метки останется прежним. Мы просто добавляем их обоих в сетку.
Сопровождающий CSS выглядит следующим образом:
#cbgrid display: grid; grid-template-area: «слева направо»; ширина: 150 пикселей; input [type = checkbox] grid-area: right; label grid-area: left;
Я не буду подробно останавливаться на том, как работает CSS-сетка, так как я уже писал подробная статья на эту тему, что вы можете прочитать здесь. Некоторые основы, однако: дисплей: сетка свойство превращает элемент в контейнер сетки, Сетка-зона идентифицирует область сетки, к которой принадлежит элемент, и Сетка-шаблон-зона формирует сетку, состоящую из разных областей сетки.
В приведенном выше коде есть две области сетки: "оставил" а также "право". Они составляют два столбца строки сетки. Флажок принадлежит "право" площадь и метка к "оставил". Вот как они выглядят на экране:
Поскольку мы не изменили относительное размещение флажка и метки в исходном коде, мы можем по-прежнему использовать соседний братский комбинатор:
вход: проверено + метка / * стиль меня * /
Обратите внимание, что элемент сетки всегда заблокирован; он появляется с окружающим прямоугольником, известным как окно уровня сетки. Если вы не хотите этого, например, для ярлыка, положить обертку на этот предмет (оберните это в другой элемент) и превратить эту оболочку в область сетки.
Вот и все, ребята. Надеюсь, CSS-сетка поможет вам закрепить макеты этих дерзких флажков..
