check css 样式

tech2023-01-12 97

check css 样式

A few years ago, web developers were unable to implement and build so many things using CSS only and without relying on JavaScript. But today CSS is mature enough that it is capable of doing powerful things without writing a single line of JavaScript. You might have also read a couple of articles about “CSS only approaches” that demonstrates the power of CSS.

几年前，Web开发人员无法仅使用CSS而不依靠JavaScript来实现和构建许多东西。但是如今，CSS已经足够成熟，无需编写任何JavaScript代码就能完成强大的功能。您可能还已经阅读了几篇有关“仅CSS方法”的文章，这些文章演示了CSS的强大功能。

When it comes to CSS-only approaches, we can’t ignore the :checked pseudo-class selector, which I’m going to use in this post. Of course, I am not the first one to write about this technique, and there have been other more extensive discussions regarding using form elements as JavaScript replacements. For example this Adobe article by Louis Lazaris and this great slideshow by Ryan Seddon.

对于纯CSS方法，我们不能忽略:checked伪类选择器，我将在本文中使用它。当然，我不是第一个写此技术的人，关于使用表单元素作为JavaScript替代品，还有其他更广泛的讨论。例如，路易·拉扎里斯(Louis Lazaris)的Adobe文章和瑞安·塞登(Ryan Seddon)的精彩幻灯片演示。

使用:checked (Using :checked)

In short, the :checked pseudo-class selector represents (selects) any radio or checkbox element that is checked or selected. The user can change the state of these elements by checking a checkbox or selecting a different value in a set of radio buttons.

简而言之， :checked伪类选择器代表(选择)选中或选中的所有单选或复选框元素。用户可以通过选中复选框或在一组单选按钮中选择其他值来更改这些元素的状态。

Before we dive deeper, take a look at the final demo to get a sense of what we will be building throughout this tutorial:

在深入探讨之前，请看一下最终演示以了解我们将在本教程中构建的内容：

See the Pen A Style Switcher with Pure CSS using :checked by SitePoint (@SitePoint) on CodePen.

使用 CodePen上的SitePoint ( @SitePoint ) 检查：使用纯CSS编写笔式样式切换器。

Now let’s get started.

现在开始吧。

建立设置框 (Building the Settings Box)

In the demo, you should have noticed the gear icon and how, when clicked, a box with some options appears. Before we go on explaining the HTML and CSS that makes up that box, take a look at the following code:

在演示中，您应该注意到齿轮图标，以及单击后如何显示带有某些选项的框。在继续解释组成该框HTML和CSS之前，请看以下代码：

/* we don't want the input fields to appear, all we need is the labels */ input[type="checkbox"], input[type="radio"] { position: absolute; visibility: hidden; } .settings-box-element { z-index: 10; }

Since we are only interested in showing the labels, the above code is used to hide the checkboxes and radio buttons. Moreover, all the labels have a class of settings-box-element with a z-index property just to make sure the labels will stay on top of any other elements on the page.

由于我们只对显示标签感兴趣，因此上面的代码用于隐藏复选框和单选按钮。此外，所有标签都具有一类具有z-index属性的settings-box-element ，以确保标签将停留在页面上任何其他元素的顶部。

Now we can break down the code that makes up the settings box. Let’s start with the gear button. Here is the HTML:

现在，我们可以分解组成设置框的代码。让我们从齿轮按钮开始。这是HTML：

<input id="settings-btn" class="settings-btn" type="checkbox"> <label for="settings-btn" class="settings-box-element"></label>

And the CSS:

和CSS：

.settings-btn + label { position: fixed; top: 130px; right: 0; display: block; width: 35px; color: #e83737; text-align: center; background: #fff; cursor: pointer; }

If you have read an article or two about using form elements as JavaScript replacements, then you should already know that we need to use input and label elements together, so that if one of the two was removed, nothing would work. So we have a checkbox input with an id="settings-btn" and a label with a for attribute that matches the id value. I’ve also added a class of settings-btn to use for our CSS hook.

如果您读过一两篇关于将表单元素用作JavaScript替代品的文章，那么您应该已经知道我们需要同时使用input和label元素，因此，如果删除了两者之一，则将无济于事。因此，我们有一个带有id="settings-btn"的复选框输入和一个带有与id值匹配的for属性的标签。我还添加了settings-btn类，用于我们CSS挂钩。

In the CSS, the label is given a position: fixed declaration with the appropriate direction properties/values (top and right).

在CSS中，标签具有一个position: fixed具有适当方向属性/值(顶部和右侧)的position: fixed声明。

Next is the white box that will virtually contain the buttons:

接下来是实际上包含按钮的白框：

The HTML first:

HTML首先：

<div class="buttons-wrapper settings-box-element"></div>

And the CSS:

和CSS：

.buttons-wrapper { position: fixed; top: 130px; right: -200px; /* should match element width */ width: 200px; height: 240px; background: #fff; }

The box is a single div element with classes “buttons-wrapper” and “settings-box-element”. As I said earlier, the latter class is mainly used to give the elements a z-index value. The “buttons-wrapper” is used to style the div element. And as you can see, the div was given a width of 200px and a height of 240px to accommodate the 5 buttons you see in the demo. Also, the div is given a position value of fixed and the appropriate right and top properties. The only thing you need to keep in mind here is that the right property should have the same value as the width but in the negative (in order to make it disappear from the viewport).

该框是单个div元素，具有“ buttons-wrapper”和“ settings-box-element”类。如前所述，后一类主要用于为元素赋予z-index值。 “ buttons-wrapper”用于设置div元素的样式。如您所见， div的宽度为200px，高度为240px，以适应演示中看到的5个按钮。而且， div的position值是fixed并且具有适当的right和top属性。这里唯一需要记住的是， right属性应与width具有相同的值，但应为负(以使它从视口中消失)。

Lets now take a look at the code for the remaining markup, that is, the 5 buttons. The comments denote the background styles that they control:

现在，让我们看一下剩下的标记(即5个按钮)的代码。注释表示它们控制的背景样式：

<input id="light-layout" class="light-layout" type="radio" name="layout" checked> <label for="light-layout" class="layout-buttons settings-box-element"> Light Background</label>  <input id="dark-layout" class="dark-layout" type="radio" name="layout"> <label for="dark-layout" class="layout-buttons settings-box-element"> Dark Background </label>  <input id="image-layout" class="image-layout" type="radio" name="layout"> <label for="image-layout" class="layout-buttons settings-box-element"> Image Background</label>  <input id="pattern-layout" class="pattern-layout" type="radio" name="layout"> <label for="pattern-layout" class="layout-buttons settings-box-element"> Pattern Background</label>  <input id="hide-show-content" class="hide-show-content" type="checkbox"> <label for="hide-show-content" class="layout-buttons settings-box-element"> Hide/Show content</label>

And here is the CSS:

这是CSS：

.layout-buttons { display: block; width: 150px; padding: 10px 0; text-align: center; border: 2px solid black; box-sizing: border-box; font-size: 0.875em; cursor: pointer; } .light-layout + label { position: fixed; top: 140px; right: -150px; } .dark-layout + label { position: fixed; top: 185px; right: -150px; } .image-layout + label { position: fixed; top: 230px; right: -150px; } .pattern-layout + label { position: fixed; top: 275px; right: -150px; } .hide-show-content + label { position: fixed; top: 320px; right: -150px; }

Notice that the first checkbox was given the “checked” attribute. That is because we want it to be the one highlighted by default.

注意，第一个复选框被赋予了“ checked”属性。那是因为我们希望它成为默认情况下突出显示的内容。

Every input field has an id and every label has a for attribute that matches the id for one of the input fields. And as you may or may not know, the secret behind such a technique is the for attribute, because when a label with a for attribute is clicked, the element that is associated with that particular label will be selected/checked and this therefore allows us to use the :checked selector.

每个输入字段都有一个id ，每个标签都有一个for属性，该属性与其中一个输入字段的id相匹配。而且，您可能知道也可能不知道，这种技术的秘密就是for属性，因为单击带有for属性的标签时，将选择/选中与该特定标签关联的元素，因此我们可以使用:checked选择器。

All the above labels have a class of “layout-buttons”. This class is used to give the buttons the default and the common styles such as width, padding, borders, etc. The other classes are used to add the unique styles to each. And as you saw for the gear icon and the white box, the position property is used with the value fixed and the appropriate top and right properties. Note that the top value for every label is 45px greater than the one before it; this is to make the buttons stack above each other nicely and without overlaps. Note also that the right property value is the same as the width of the buttons but in negative.

以上所有标签都有一类“布局按钮”。此类用于为按钮提供默认样式和通用样式，例如宽度，填充，边框等。其他类别用于为每种样式添加唯一样式。就像您看到的齿轮图标和白框一样， position属性与fixed值一起使用，并具有适当的top和right属性。请注意，每个标签的top值比之前的top 45px；这是为了使按钮彼此之间很好地堆叠并且没有重叠。还要注意， right属性值与按钮的宽度相同，但为负数。

Now take a look at the last part of our CSS code:

现在看一下我们CSS代码的最后一部分：

input[type="radio"]:checked + label { background: #e83737; color: #fff; border-color: #e83737; }

The above CSS is used to change the default styles of the label associated with the selected radio button (we have 4 radio buttons). I used the adjacent sibling selector to target every label that is preceded by an input field of type “radio”. So as you can see, the background and border properties were given the value #e83737 (a reddish color) and the color property the value #fff. Nothing really fancy or complex.

上面CSS用于更改与所选单选按钮(我们有4个单选按钮)关联的标签的默认样式。我使用了相邻的兄弟选择器来定位每个以“ radio”类型输入字段开头的标签。如您所见， background和border属性的值是#e83737 (带红色的颜色)， color属性的值是#fff 。没什么特别花哨的或复杂的。

The remaining elements in the HTML will be wrapped inside a div:

HTML中的其余元素将包装在div ：

<div class="main-wrapper"> <div class="content"> <h1>Cool stuff with CSS only!</h1> <p>Lorem ipsum dolor sit amet...</p> </div> </div>

Notice in the above code that I positioned every element of the settings box independently where I could just wrap them all inside a div or section element and position this one single element, therefore making things simpler. This is done simply because you can’t select a parent element, only a sibling.

注意，在上面的代码中，我独立放置了设置框的每个元素，可以将它们全部包装在div或section元素中，然后将其放置在单个元素中，因此使事情变得更简单。这样做是因为您不能选择父元素，而只能选择同级。

So in this case, all the main content is wrapped inside a div with class="main-wrapper". And as you will see later, to be able to change the styles for this div, we will need to select that div by writing something similar to this:

因此，在这种情况下，所有主要内容都通过class="main-wrapper"包装在div 。正如您稍后将看到的那样，为了能够更改该div的样式，我们需要通过编写类似于以下内容的方法来选择该div ：

input[type="checkbox"]:checked ~ main-wrapper { /* some styles here */ }

Here I’m using the general sibling selector to select the main div, which is the only way to do that.

在这里，我使用通用的同级选择器选择main div ，这是唯一的方法。

单击齿轮图标 (Clicking the Gear Icon)

Clicking the gear icon should make the settings box appear. Here is the code to make that happen:

单击齿轮图标应显示设置框。这是实现此目的的代码：

.settings-btn:checked + label { right: 200px; /* match width of .buttons-wrapper */ } .settings-btn:checked ~ .buttons-wrapper { right: 0; } .settings-btn:checked ~ .layout-buttons { right: 30px; }

When the user clicks on the gear icon, the checkbox with id="settings-btn" will be selected, and here comes the magic. Once the gear icon is clicked, the following will happen:

当用户单击齿轮图标时，将选中id="settings-btn"复选框，神奇之处就在于此。单击齿轮图标后，将发生以下情况：

Using the adjacent sibling selector (+), the label that comes immediately after that checkbox will be selected and then moved 200 pixels from the right of the viewport.

使用相邻的同级选择器( + )，将选中紧接该复选框之后的标签，然后将其从视口右侧移出200个像素。

Using the general sibling selector ~, the elements with classes “buttons-wrapper” and “layout-buttons” will be selected and then moved so that they are 0 pixels and 30 pixels, respectively, from the right of the viewport.

使用通用的同级选择器~ ，将选择类“ buttons-wrapper”和“ layout-buttons”的元素，然后将其移动，以使其分别从视口右侧开始分别为0像素和30像素。

Both the adjacent sibling selector and the general sibling selector are indispensable here as this technique will not work without them.

相邻的同级选择器和常规同级选择器在这里都是必不可少的，因为没有它们，该技术将无法工作。

改变背景 (Changing the background)

Let me remind you of the HTML code for the radio buttons:

让我提醒您单选按钮HTML代码：

The background that we will be changing is the background of the .main-wrapper element. Here is the CSS:

我们将要更改的背景是.main-wrapper元素的背景。这是CSS：

.light-layout:checked ~ .main-wrapper { background: #eaeaea; } .dark-layout:checked ~ .main-wrapper { background: #494949; } .image-layout:checked ~ .main-wrapper { background: url(image url) no-repeat center 0 fixed; } .pattern-layout:checked ~ .main-wrapper { background: url(images/pattern1.png) repeat; }

You can see that in the HTML we have 4 input elements of type="radio" and 4 labels. When any of the labels is clicked, the input that is associated with that particular label will be selected and therefore matched by the :checked pseudo-class. Then, depending on which label is clicked, one of the above four styles will be applied to the main wrapper.

您可以看到，在HTML中，我们有4个type="radio"输入元素和4个标签。单击任何标签时，将选择与该特定标签关联的输入，并因此通过:checked伪类:checked匹配。然后，根据单击哪个标签，将以上四种样式之一应用于主包装。

隐藏/显示内容 (Hiding/Showing content)

For the show/hide element, I’m using a checkbox:

对于show / hide元素，我使用了一个复选框：

<input id="hide-show-content" class="hide-show-content" type="checkbox"> <label for="hide-show-content" class="layout-buttons settings-box-element"> Hide/Show content</label>

And here is the CSS:

这是CSS：

.hide-show-content:checked ~ .main-wrapper .content { display: none; }

In this case, we tell the browser to select the element with class="content" and set it to display: none” when the user clicks on the associated label, therefore selecting the checkbox.

在这种情况下，当用户单击关联的标签时，我们告诉浏览器选择class="content"的元素，并将其设置为display: none ，因此选中该复选框。

结论 (Conclusion)

There are many other things you can do using this selector technique and the limit is your own creativity. If this technique is new to you, I hope this article can serve as a starting point for you to experiment with other possibilities.

使用此选择器技术，您还可以做很多其他事情，而极限是您自己的创造力。如果您不熟悉这项技术，我希望本文可以作为您尝试其他可能性的起点。

Below you’ll find the completed demo:

在下面，您将找到完整的演示：

See the Pen A Style Switcher with Pure CSS using :checked by SitePoint (@SitePoint) on CodePen.

使用 CodePen上的SitePoint ( @SitePoint ) 检查：使用纯CSS编写笔式样式切换器。

翻译自: https://www.sitepoint.com/building-style-switcher-with-pure-css-using-checked/

check css 样式

最新回复(0)