搜索

首页 >web前端 >css教程 >使用纯CSS构建样式切换器，使用：检查

使用纯CSS构建样式切换器，使用：检查

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原创
2025-02-24 08:23:10142浏览

Building a Style Switcher with Pure CSS Using :checked

使用纯CSS构建样式切换器，使用：检查

几年前，Web开发人员无法仅使用CSS实施和构建如此多的东西，而无需依赖JavaScript。但是今天，CSS已经足够成熟，可以在不编写一行JavaScript的情况下做强大的事情。您可能还阅读了几篇有关“仅CSS方法”的文章，这些文章证明了CSS的力量。

>仅使用CSS方法，我们不能忽略：检查的伪级选择器，我将在这篇文章中使用。当然，我不是第一个写有关此技术的人，并且关于使用形式元素作为JavaScript替代品还有其他更广泛的讨论。例如，路易斯·拉扎里斯（Louis Lazaris）和瑞安·塞登

钥匙要点

：CSS中的检查伪级选择器可用于构建样式切换器，而无需编写JavaScript行。它选择了检查或选择的任何收音机或复选框元素。
    >
  • ：检查的伪级选择器与输入和标签元素结合使用。单击标签元素中的“ for”属性，选择或检查关联的输入元素，从而可以使用：checked selector。
    • > CSS“位置：固定”声明以及“顶部”和“右”属性可用于在页面上定位元素。 “ z index”属性可确保标签保持页面上其他任何元素的顶部。
    • ：基于用户与关联标签元素的用户互动，可以使用：检查的伪级选择器来更改元素的背景，隐藏或显示内容或应用其他样式。
  • >：检查的伪级选择器与相邻的兄弟姐妹选择器（）和一般的兄弟姐妹选择器（〜）一起使用，从而允许页面上不同元素之间的相互作用。该技术可用于在网页上创建各种交互式功能。
    • >
    • >使用：检查
  • 简而言之，
    • ：检查的伪级选择器代表（选择）被检查或选择的任何无线电或复选框元素。用户可以通过选中复选框或在一组无线电按钮中选择其他值来更改这些元素的状态。

>在我们深入研究之前，请看一下最后的演示，以了解我们在本教程中将要构建的内容：

>请参阅纯CSS的笔式切换器，使用：codepen上的sitepoint（@sitepoint）检查。

现在让我们开始。

>

构建设置框

在演示中，您应该注意到齿轮图标以及单击时如何出现带有一些选项的盒子。在我们继续解释组成该框的HTML和CSS之前，请查看以下代码：

> 

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>
>由于我们仅有兴趣显示标签，因此上述代码用于隐藏复选框和无线电按钮。此外，所有标签都有一类设置盒元素，并具有Z-Index属性，只是为了确保标签将保持在页面上的任何其他元素的顶部。

>

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

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>
和CSS：

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>
>您已经阅读了一两篇文章，以将表单元素用作JavaScript替代品，那么您应该已经知道我们需要一起使用输入和标签元素，以便如果删除了两个元素，则无效。因此，我们有一个带有AN和一个标签的复选框输入，其中符合ID值的属性。我还添加了一类设置-BTN用于我们的CSS挂钩。

> 在CSS中，给出标签的位置：固定声明，具有适当的方向属性/值（顶部和右）。

下一

html首先：

和CSS：

框是一个单个DIV元素，其中包含“按钮 - 版本”和“设置 - 盒元素”。正如我之前所说，后一类主要用于给出元素一个z指数值。 “按钮 - 包装器”用于样式DIV元素。如您所见，DIV的宽度为200px，高度为240px，以适应您在演示中看到的5个按钮。同样，为DIV赋予固定权利和适当属性的位置值。您唯一需要牢记的是，正确的属性应具有与宽度相同的值，但在负面方面（为了使其从视口消失）。

> 
<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>
>现在让我们查看剩余标记的代码，即5个按钮。评论表示他们控制的背景样式：

<span><span>.buttons-wrapper</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: -200px; /* should match element width */
</span>  <span>width: 200px;
</span>  <span>height: 240px;
</span>  <span>background: #fff;
</span><span>}</span>
，这是CSS：

请注意，第一个复选框给出了“检查”属性。那是因为我们希望它是默认情况下突出显示的那个。

> 
<span><!-- background styles -->
</span><span><!-- light background (#eaeaea) -->
</span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span>
</span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Light Background<span><span><span></label</span>></span>
</span>
<span><!-- dark background (#494949) -->
</span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Dark Background
<span><span><span></label</span>></span>
</span>
<span><!-- image background -->
</span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Image Background<span><span><span></label</span>></span>
</span>
<span><!-- pattern background -->    
</span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Pattern Background<span><span><span></label</span>></span>
</span>
<span><!-- hide/show content -->
</span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Hide/Show content<span><span><span></label</span>></span></span>
每个输入字段都有一个ID，每个标签都有一个属性，该属性与其中一个输入字段的ID匹配。而且，您可能知道或可能不知道，这种技术背后的秘密是属性，因为当单击具有for属性的标签时，将选择/检查与该特定标签相关的元素，因此，这允许我们使用：检查的选择器。

上述所有标签都有一类“布局按钮”。该类用于给按钮提供默认和常见样式，例如宽度，填充，边框等。其他类用于将唯一样式添加到每个类别中。正如您看到的齿轮图标和白色框一样，位置属性与固定的值以及适当的顶部和正确属性一起使用。请注意，每个标签的最高值比以前的标签大于45px。这是为了使按钮彼此叠加，而没有重叠。还请注意，正确的属性值与按钮的宽度相同，但为负。

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

> 

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>
>上述CSS用于更改与所选广播按钮关联的标签的默认样式（我们有4个无线电按钮）。我使用相邻的同胞选择器来定位“无线电”类型的输入字段之前的每个标签。因此，如您所见，背景和边框属性被赋予值＃E83737（红色颜色）和颜色属性为#fff。没有什么真正喜欢或复杂的。

HTML中的其余元素将包裹在DIV中：

>在上面的代码中注意，我将设置框的每个元素放置在独立的情况下，我可以将它们全部包裹在DIV或部分元素中，然后将一个单个元素放置，从而使事情变得更简单。这仅仅是因为您不能选择父元素，而只有一个兄弟姐妹。
<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>
> 因此，在这种情况下，所有主要内容都包裹在DIV内。正如您稍后会看到的，要能够更改此DIV的样式，我们需要通过编写与此类似的内容来选择该div：

>在这里，我正在使用一般的同级选择器来选择主div，这是唯一做到这一点的方法。

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>
单击齿轮图标

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

>

>用户单击齿轮图标时，将选择使用复选框，而魔术则是魔术。单击齿轮图标后，将会发生以下内容：

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

>

使用相邻的兄弟姐妹选择器（），将选择该复选框后立即出现的标签，然后从视口右侧移动200个像素。
  1. >

    >使用一般同级选择器〜，将选择带有“按钮 - wrapper”和“ butout buttons”类的元素，然后移动，以便它们分别是0个像素和30像素，从视口。

  2. 相邻的同胞选择器和一般兄弟姐妹选择器在这里都是必不可少的，因为没有它们，此技术将无法使用。

    >

    更改背景
>让我提醒您无线电按钮的HTML代码：>
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

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

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

>您可以看到，在HTML中，我们有4个输入元素=“无线电”和4个标签。当单击任何标签时，将选择与该特定标签关联的输入，因此将与：检查的伪级相匹配。然后，根据单击哪个标签，以上四种样式之一将应用于主包装器。

>

>隐藏/显示内容

>对于显示/隐藏元素，我正在使用一个复选框：

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

，这是CSS：

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

在这种情况下，我们告诉浏览器选择元素并将其设置为显示：无”当用户单击关联标签时，因此选择复选框。

结论

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

>

下面您会找到完整的演示：

>请参阅纯CSS的笔式切换器，使用：codepen上的sitepoint（@sitepoint）检查。

>经常询问的问题（常见问题解答）使用检查

使用纯CS构建样式切换器

在CSS中检查的伪级是什么目的？ ，或用户选择的选项元素。它是一个强大的工具，可让开发人员在不需要JavaScript的情况下创建交互式和动态的网页。例如，它可用于创建样式切换器，用户可以通过选择不同的选项来更改网页的外观。

>

>：检查伪级工作如何？ ：通过选择当前选择或检查的HTML元素来检查伪级的作品。它通常与复选框或无线电按钮之类的形式元素使用。当用户选择或检查以下元素之一时，：检查的伪级会变得活跃，并将指定的CSS样式应用于该元素。这可以用来突出显示所选的选项，显示或隐藏内容，甚至更改网页的整个布局。

>

我可以使用：检查的伪级与其他html元素？

the：Checked pseudo-class主要用于复选框，无线电按钮和选项元素等形式元素。但是，它也可以与其他元素一起与HTML5属性“可满足”一起使用。这使您可以创建用户可以编辑的交互式内容，并在“检查”或“选定”状态时以不同的方式进行样式。

>

>如何使用：检查的伪级来创建样式切换器？

>使用：检查的伪级创建样式切换器，您首先需要使用无线电按钮或无线电按钮或每个样式选项的复选框。然后，在您的CSS中，您将使用：检查的伪级使用：根据选择哪个选项来应用不同的样式。这可能涉及更改网页外观外观的配色方案，字体，布局或任何其他方面。

>我可以使用：检查的伪级来创建动态内容吗？ ：检查伪级可用于创建动态内容。通过将其与其他CSS选择器和属性相结合，您可以根据用户的选择显示或隐藏内容，更改布局或创建交互式功能。这可以极大地增强用户体验，并使您的网页更具吸引力和交互性。

可以使用：不带JavaScript的检查伪级？的：检查的伪级是，它允许您在不需要JavaScript的情况下创建交互式功能。尽管JavaScript是Web开发的强大工具，但它也可能很复杂且难以使用。 ：检查的伪级提供了一种更简单的替代方案，用于创建交互式内容。

如何在不同的浏览器中支持的：检查的伪级？

：：检查的伪级在所有现代浏览器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 8或更早版本中不支持它。因此，如果您需要支持这些较旧的浏览器，则可能需要使用基于JavaScript的解决方案。

>

>我可以使用：检查的伪级对样式的复选框和无线电按钮？ >是的，可以使用：检查的伪级可用于样式的复选框和无线电按钮。默认情况下，这些表单元素具有非常基本的外观，但是使用：检查伪级，您可以自定义它们的外观以匹配其余的网站。当选择这些元素时，您可以更改颜色，大小，形状，甚至这些元素的动画。

>

>：检查的伪级？检查伪级通常用于创建交互式功能，例如样式切换器，手风琴，选项卡和模态。它也可以用于样式形式形式的元素，例如复选框和无线电按钮，或者用“可满足”属性创建可编辑的内容。它对用户输入做出反应的能力使其成为增强用户体验的强大工具。

>使用：检查的伪级

>

>

> >时，是否有任何限制或缺点。它只能选择当前选择或检查的元素，因此不能根据其他状态或条件来设计元素。此外，Internet Explorer 8或更早版本中不支持它。尽管有这些限制，但它仍然是创建交互式和动态的Web内容的宝贵工具。>

以上是使用纯CSS构建样式切换器，使用：检查的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 firefox css chrome safari html edge if for while select checkbox break using class Interface Attribute Property default this display position padding border viewport background animation input Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Intuitive Scrolling Interfaces with CSS Scroll Snap Points下一篇：Using Jade and Grunt to Speed Up HTML Production

相关文章

查看更多