虽然有一种相对简单的方法来设置标签在复选框之后的样式，但要在标签之前出现标签并不是那么容易。

没有CSS网格的复选框样式

自从我们在某处阅读有关标签的内容后，开发人员就一直在为复选框添加样式标签。 该技术是CSS可以拥有的强大动力的主要和古老的例子之一。

这是您可能已经熟悉的代码，它在选中的复选框后为标签设置样式 ：

label for the checkbox

input:checked + label {  /* style me */}

上面CSS代码使用由+键标记的 。 当复选框处于状态时，可以使用此方法设置其后的元素 （通常为标签）的样式。

如此简单有效的技术！ 它可能有什么问题？ 没什么-直到您要在复选框之前显示标签。

相邻的同级组合器选择下一个元素 ； 这意味着标签必须位于HTML源代码中的复选框之后 。

因此，要使标签出现在屏幕上的所属复选框之前 ，我们不能仅将其移动到源代码中该复选框之前，因为CSS中不存在以前的兄弟选择器 。

只留下一个选择： 重新定位的复选框，并用标签 transform或position或margin或以某种灵力电源的另一个CSS属性，使标签将出现在左侧屏幕上的复选框。

传统方法的问题

前面提到的技术没有什么大不了的 ，但是在某些情况下可能效率很低 。 我指的是复选框和标签的重新排列位置不再起作用的情况。

例如， 考虑响应式 。 您可能必须根据显示的设备调整复选框的大小或位置。 发生这种情况时，您也需要重新定位标签 ，因为不会因复选框的重新定位/调整大小而对标签进行自动重新对齐。

如果我们可以为复选框和标签提供一些可靠的布局 ，而不是将它们粗略地放置在页面上 ，则可以消除此缺点。

但是，几乎所有布局系统（例如表或列）都要求您在源代码中的复选框之前添加标签，以使其在屏幕上以相同的方式显示。 那是我们不希望做的事情，因为标签上的下一个元素选择器将停止工作。

另一方面，CSS Grid是一种布局系统，它不依赖于源代码中元素的位置/顺序 。

网格布局的重新排序功能有意仅影响视觉渲染 ，保留语音顺序和基于源顺序的导航。 这使作者可以在不影响源顺序的情况下操纵视觉呈现…–

因此，CSS网格是设置出现在 checkbox 之前的标签样式的理想解决方案。

CSS网格的复选框样式

让我们从HTML代码开始。 复选框和标签的顺序将与以前相同。 我们只是将它们都添加到网格中。

    
  
       
     label for the checkbox
    

随附CSS如下：

#cbgrid {  display: grid;  grid-template-areas: "left right";  width: 150px;}input[type=checkbox] {  grid-area: right;}label {  grid-area: left;}

我已经写了一篇有关该主题的详细文章，因此我不会深入介绍CSS网格的工作原理，您可以 。 但是，有些基本知识： display: grid属性将元素转换为网格容器， grid-area标识元素所属的网格区域， grid-template-areas形成网格布局，由不同的网格区域组成。

在上面的代码中，有两个网格区域 ： "left"和"right" 。 它们构成网格行的两列 。 该复选框属于"right"区域，标签属于"left" 。 它们在屏幕上的外观如下 ：

由于我们没有更改复选框和标签在源代码中的相对位置，因此我们仍然可以使用相邻的同级组合器 ：

input:checked + label {  /* style me */}

注意网格项总是块状的 ; 它与周围的框（称为网格级框）一起出现 。 如果您不希望这样（例如，用于标签）， 则在该项目上放置一个包装纸 （将其包装在另一个元素中）， 然后将该包装纸放入网格区域 。

就是这样，伙计们。 CSS网格有望帮助您确定那些厚脸皮复选框的布局。

翻译自: