移动端点击自定义Checkbox出现半透明黑背景的问题求助

• 点击自定义Checkbox时仅移动端出现半透明黑色背景，桌面端无此现象
• 已尝试修改:active、:focus、:hover伪类，问题仍未解决
• 基于React项目开发，该Checkbox组件取自Uiverse

HTML代码 #

<div class="con-like">
  <input title="like" type="checkbox" class="like">
  <div class="checkmark">
    <svg viewBox="0 0 24 24" class="outline" xmlns="http://www.w3.org/2000/svg">
      <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"></path>
    </svg>
    <svg viewBox="0 0 24 24" class="filled" xmlns="http://www.w3.org/2000/svg">
      <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"></path>
    </svg>
    <svg class="celebrate" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="10,10 20,20" class="poly"></polygon>
      <polygon points="10,50 20,50" class="poly"></polygon>
      <polygon points="20,80 30,70" class="poly"></polygon>
      <polygon points="90,10 80,20" class="poly"></polygon>
      <polygon points="90,50 80,50" class="poly"></polygon>
      <polygon points="80,80 70,70" class="poly"></polygon>
    </svg>
  </div>
</div>

CSS代码 #

.con-like {
  --red: #ee427b;
  position: relative;
  width: 50px;
  height: 50px;
}

.con-like .like {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
  cursor: pointer;
}

.con-like .checkmark {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.con-like .outline,
.con-like .filled {
  fill: var(--red);
  position: absolute;
}

.con-like .filled {
  animation: kfr-filled 0.5s;
  display: none;
}

.con-like .celebrate {
  position: absolute;
  animation: kfr-celebrate 0.5s;
  animation-fill-mode: forwards;
  display: none;
}

.con-like .poly {
  stroke: var(--red);
  fill: var(--red);
}

.con-like .like:checked ~ .checkmark .filled {
  display: block
}

.con-like .like:checked ~ .checkmark .celebrate {
  display: block
}

@keyframes kfr-filled {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes kfr-celebrate {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 0.8;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
    display: none;
  }
}

解决方案 #

这个半透明黑背景是移动端浏览器的默认点击高亮效果，和:active/:focus/:hover伪类无关，只需添加以下CSS禁用：

.con-like {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

或者直接给点击的输入框添加：

.con-like .like {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

说明 #

移动端WebKit内核浏览器（如Chrome、Safari）在点击可交互元素时，会默认生成一个半透明的高亮反馈层，-webkit-tap-highlight-color是对应私有属性，设置为transparent即可完全禁用该效果，同时添加标准属性tap-highlight-color保证未来兼容性。

内容的提问来源于stack exchange，提问作者WhiteVulpes