时间戳

首页 > 解决方案 > 移动设备上的问题：复选框变黑，汉堡图标的中间跨度元素不更改为零不透明度

html - 移动设备上的问题：复选框变黑，汉堡图标的中间跨度元素不更改为零不透明度

问题描述

我的汉堡包图标和复选框输入有问题。

我期望发生的是复选框完全不可见，但仍然可以检查它，这将触发我的汉堡包图标形成十字形的过渡，中间跨度变得不可见。

我需要解决的问题：

这是HTML：

<div class="menu-icon">
  <input type="checkbox" name="checkbox" value="">
   <span></span>
   <span></span>
   <span></span>
</div>

这是CSS：

.menu-icon input, .menu-icon input:checked {
  -webkit-appearance: none;
  -webkit-border-radius:0px;
  opacity: 0%;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 5;
}

.menu-icon span {
  transition: all 0.4s ease-in-out;
  margin-bottom: 10px;
  background: black;
  width: 40px;
  height: 3px;
  border-radius: 10px;
}

.menu-icon input:checked ~ span:first-of-type {
  transform: rotate(45deg) translate(9px, 9px);
}

.menu-icon input:checked ~ span:nth-child(3) {
  opacity: 0%;
}


.menu-icon input:checked ~ span:last-of-type {
  transform: rotate(-45deg) translate(10px, -10px);
}


.menu-icon span:last-of-type {
  margin-bottom: 0;
}

正在发生的事情的图片： 之前 之后

我曾尝试查看以前的帖子和谷歌，但我似乎找不到任何关于我的具体问题的信息。

如您所见，我尝试添加一些 webkit，但没有成功。

先感谢您。

标签： htmlcssmobile

解决方案

这修复了列表中的 3 个项目。

基本上所有更改都在.menu-icon spancss 中。我在复选框上设置display: block;和position: relative;居中跨度。当然，您可能需要调整位置以适合您的布局。

这是一个巧妙地使用 css 动画和改变图标样式的方法。不是我的设计。我在过去看到过它的使用。

.menu-icon input, .menu-icon input:checked {
  opacity: 0%;
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 4;
}

.menu-icon span {
  transition: all 0.4s ease-in-out;
  margin-bottom: 10px;
  background: black;
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 10px;
  position: relative;
  top: -44px;
  left: 8px;
}

.menu-icon input:checked ~ span:first-of-type {
  transform: rotate(45deg) translate(9px, 9px);
}

.menu-icon input:checked ~ span:nth-child(3) {
  opacity: 0%;
}


.menu-icon input:checked ~ span:last-of-type {
  transform: rotate(-45deg) translate(10px, -10px);
}


.menu-icon span:last-of-type {
  margin-bottom: 0;
}
<div class="menu-icon">
  <input type="checkbox" name="checkbox" value="">
   <span></span>
   <span></span>
   <span></span>
</div>

密码笔

推荐阅读