css checkbox_如何使用CSS Checkbox Hack构建手风琴组件

最新推荐文章于 2024-04-02 11:10:24 发布

daique1908

最新推荐文章于 2024-04-02 11:10:24 发布

阅读量247

点赞数

文章标签： css html python java web

css checkbox

在这个简短的教程中，我们将学习如何利用“ CSS checkbox hack技术”构建仅CSS的灵活手风琴组件。最重要的是，我们的组件将完全响应，其布局将根据视口大小在水平和垂直之间切换。

在此过程中，我们将讨论CSS Checkbox Hack的工作原理，并查看CodePen开发人员提供的其他Checkbox Hack启发。听起来很有趣？

我们的响应式CSS手风琴

这是我们在本教程中将要构建的内容：

等等，什么是CSS Checkbox Hack？

CSS复选框hack允许您根据是否选中复选框（或单选按钮）来控制某些样式。它使用:checked伪类选择器，它使我们可以说“如果选中了复选框，则将这些样式规则应用于其同级等”。

开发人员通常会隐藏输入本身，通过其标签控制检查值，因此用户甚至根本无法得知他们在切换复选框。

1.从HTML标记开始

出于本练习的目的，我们将从Wikipedia中获取有关四种不同内容的内容：动物，植物，空间和河流。

然后，我们将创建相应的单选按钮，并将其分组为wiki关键字：

<input type="radio" id="animal" name="wiki" value="Animal" checked>
<input type="radio" id="plant" name="wiki" value="Plant">
<input type="radio" id="space" name="wiki" value="Space">
<input type="radio" id="river" name="wiki" value="River">

建立无序列表

接下来，我们将指定一个包含四个列表项的无序列表。每个列表项将代表一个手风琴项/窗格并包含两个元素：

首先，一个标签将用作手风琴的标题，并负责打开目标物品。其for值应与上述单选按钮之一的id值匹配。
其次，一个div元素将用作手风琴的内容区域。

默认情况下，必须打开我们的手风琴中的一个窗格。考虑到这一点，让我们将checked属性添加到第一个单选按钮。

放在一起，这是我们需要的标记：

<ul class="accordion">
  <li>
    <label for="animal" class="accordion-title">
      <span>...</span>
      <span class="accordion-heading">...</span>
    </label>
    <div class="accordion-content">...</div>
  </li>
  <li>
    <label for="plant" class="accordion-title">
      <span>...</span>
      <span class="accordion-heading">...</span>
    </label>
    <div class="accordion-content">...</div>
  </li>
  <li>
    <label for="space" class="accordion-title">
      <span>...</span>
      <span class="accordion-heading">...</span>
    </label>
    <div class="accordion-content">...</div>
  </li>
  <li>
    <label for="river" class="accordion-title">
      <span>...</span>
      <span class="accordion-heading">...</span>
    </label>
    <div class="accordion-content">...</div>
  </li>
</ul>

2.定义样式

准备好标记（并与前面所述CSS复选框内联在一起），我们首先将单选按钮移出屏幕，以可视方式隐藏单选按钮：

input[type="radio"] {
  position: absolute;
  left: -9999px;
}

手风琴将具有最大宽度，最小高度，并表现为伸缩容器：

/*CUSTOM VARIABLES HERE*/

.accordion {
  display: flex;
  width: calc(100% - 20px);
  max-width: 800px;
  min-height: 380px;
  margin: 0 auto;
  background: var(--accordion-color);
  color: var(--white);
}

此外，每个列表项都将用作弹性包装器：

.accordion li {
  display: flex;
}

手风琴项目应该分开，所以让我们给它们加上边框：

/*CUSTOM VARIABLES HERE*/

.accordion li:not(:last-child) {
  border: 1px solid var(--separator-color);
}

项目内的每个标题（标签）将是一个伸缩容器，其子元素将沿主轴垂直分布。此外，所有项目的宽度均为70px：

/*CUSTOM VARIABLES HERE*/

.accordion .accordion-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: normal;
  padding: 20px 10px;
  background: var(--title-color);
  transition: color 0.1s;
}

.accordion .accordion-title:hover {
  color: var(--active-color);
}

.accordion-heading内的文本将垂直旋转：

.accordion .accordion-heading {
  display: inline-block;
  white-space: nowrap;
  transform-origin: bottom;
  transform: rotate(-90deg) translate(50%, 50%);
}

最初，除了第一个窗格之外，所有其他窗格都将被隐藏：

.accordion .accordion-content {  
  display: none;
  align-items: center;
  padding: 20px;
}

3. Checkbox Hack：切换窗格

因此，当某个项目变得可见时，它将收到display: flex而不是display: block 。这是因为我们想通过利用align-items: center属性值在垂直方向上使其内容align-items: center 。此外，活动窗格的颜色必须更改，因此访问者可以清楚地了解哪个窗格处于打开状态。

可选地，每次单选按钮获得焦点时，我们都可以为其相关的标签添加轮廓。这个小细节将帮助我们增强组件的可访问性。

以下是相关CSS内容：

/*CUSTOM VARIABLES HERE*/

[value="Animal"]:checked ~ .accordion [for="animal"] + .accordion-content,
[value="Plant"]:checked ~ .accordion [for="plant"] + .accordion-content,
[value="Space"]:checked ~ .accordion [for="space"] + .accordion-content,
[value="River"]:checked ~ .accordion [for="river"] + .accordion-content {
  display: flex;
}

[value="Animal"]:checked ~ .accordion [for="animal"],
[value="Plant"]:checked ~ .accordion [for="plant"],
[value="Space"]:checked ~ .accordion [for="space"],
[value="River"]:checked ~ .accordion [for="river"] {
  color: var(--active-color);
}

/*optional*/
[value="Animal"]:focus ~ .accordion [for="animal"],
[value="Plant"]:focus ~ .accordion [for="plant"],
[value="Space"]:focus ~ .accordion [for="space"],
[value="River"]:focus ~ .accordion [for="river"] {
  outline: 1px solid var(--active-color);
}

4.积极响应

正如我们已经讨论过的，手风琴内部的物品应在小屏幕上堆叠，这样手风琴将具有垂直布局。多亏了flexbox，我们可以在无需花费太多精力的情况下实现此设计。实际上，我们要做的就是更新flex包装器的方向，并重置.accordion-heading的transform属性值。

在下面的媒体查询中查看响应式样式：

@media screen and (max-width: 650px) {
  .accordion {
    min-height: 0;  
  }
  
  .accordion,
  .accordion li {
    flex-direction: column;
  }
  
  .accordion .accordion-title {
    flex-direction: row;
    width: auto;
  }
  
  .accordion .accordion-heading {
    transform: none;
  }
  
  .accordion .accordion-title,
  .accordion .accordion-content {
    padding: 20px;
  }
}

5.奖金：内容有限

在我们的案例中，每个手风琴项目中都有很多内容，因此一切看起来都很棒。但是，请确保在窗格中没有足够内容（例如，窗格仅包含社交链接）时，手风琴仍能正常工作。

为了满足这种情况，我们必须做两件事：

将flex-grow: 1添加到包含活动窗格的列表项。要仅定位该项目而不是全部目标，我们需要向列表项目添加一个新的自定义属性（ data-radio ），并为其标签的值赋值。
在.accordion-content添加flex-grow: 1 ，它将扩展并覆盖整个父级宽度。
由于justify-content: center ， .accordion-content的内容水平justify-content: center 。

考虑到以上所有内容，我们将对HTML进行如下修改：

<ul class="accordion">
  <li data-radio="animal">...</li>
  <li data-radio="plant">...</li>
  <li data-radio="space">...</li>
  <li data-radio="river">...</li>
</ul>

然后，在CSS中，我们将包括以下样式：

.accordion .accordion-content {
  justify-content: center;
  flex-grow: 1;
}

[value="Animal"]:checked ~ .accordion [data-radio="animal"],
[value="Plant"]:checked ~ .accordion [data-radio="plant"],
[value="Space"]:checked ~ .accordion [data-radio="space"],
[value="River"]:checked ~ .accordion [data-radio="river"] {
  flex-grow: 1;
}