Elementor lightbox按钮按下时的异常显示行为处理咨询

该半透明青色条块是Android端Chromium内核浏览器（含系统WebView、Chrome、国内多数套壳安卓浏览器）自带的默认触摸高亮反馈，不是Elementor组件的功能异常，可通过以下三种方案调整或规避：

• 直接移除高亮效果（优先级最高，生效最快）
  通过CSS覆盖浏览器默认的触摸高亮属性，将对应按钮的高亮色设为全透明即可完全消除该条块，代码放到WordPress后台「外观-自定义-额外CSS」里保存就生效：

  /* 定向匹配Elementor灯箱左右导航按钮 */
  .elementor-lightbox .swiper-button-prev,
  .elementor-lightbox .swiper-button-next {
      -webkit-tap-highlight-color: transparent;
      -webkit-focus-ring-color: transparent;
      outline: none;
  }
  

  如果不需要完全移除，只想改成和站点风格匹配的颜色，把transparent替换成目标rgba色值即可，比如低透明度白色rgba(255,255,255,0.15)。
• 收窄按钮点击热区消除长条显示
  该异常显示为长条状，是因为Elementor默认给左右导航按钮加了朝向屏幕侧的内边距，用来扩大移动端触摸响应范围，浏览器默认高亮会铺满整个元素的盒模型区域，所以会拉出长条。可以通过CSS收窄多余内边距，让高亮范围和按钮图标本身大小一致：

  .elementor-lightbox .swiper-button-prev {
      padding-left: 0 !important;
  }
  .elementor-lightbox .swiper-button-next {
      padding-right: 0 !important;
  }
  

  样式里的!important不能省略，否则优先级不够覆盖Elementor自带的行内样式。
• 升级Elementor版本原生修复
  Elementor 3.18及之后的稳定版本已经在官方组件样式里补了移动端触摸高亮的兼容处理，升级到最新正式版后不需要手动加CSS，该异常交互会自动消失。

注意：不要给全站所有元素统一加-webkit-tap-highlight-color: transparent，会导致全站可点击元素都失去触摸反馈，影响普通用户的操作判断，仅定向给灯箱按钮加对应样式即可。

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