html - 如何使调整器更大，（更大的可点击区域）？

Question

我有来自 codepen 的代码：https ://codepen.io/beben-koben/pen/JKzyf

body {
  background: rgb(17, 17, 17)
}

.image-slider {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.image-slider img {
  user-select: none;
  max-width: 400px;
}

.image-slider>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

.image-slider>div:before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  overflow: hidden;
  position: absolute;
  resize: horizontal;
  right: 3px;
  bottom: 3px;
  background-clip: content-box;
  background: linear-gradient(-45deg, black 50%, transparent 0);
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

<center><br /><br /><br />
  <div class="image-slider">
    <div>
      <img src="https://2.bp.blogspot.com/-VUtyA1E1LXs/U-tG_FPz0UI/AAAAAAAAIHc/dXifHfeBCUQ/s1600/face-before.jpg" />
    </div>
    <img src="https://1.bp.blogspot.com/-bEQl5-KrxHY/U-tG9gPXbZI/AAAAAAAAIHU/JEI5b_YRpjY/s1600/face-after.jpg" />
  </div>
</center>

我唯一的问题是调整大小抓取器几乎不可能在较小的屏幕上点击。我已经看到了抓取器一直向上的比较滑块。

有没有办法自定义可点击区域？

标签： htmlcss