css - 自定义范围按钮不显示图标

Question

我正在尝试向我的自定义 slider 添加一个按钮。这是 a Fiddle .

这是我的 CSS:

input[type="range"] {
  width: 100%;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDF1F0), to(#F6F8F7));
  -webkit-appearance: none;
  border-radius: 10px;
  padding: 5px;
  transition: opacity 0.5s;
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  content: '>';
  border-radius: 50%;
  background: lightgray;
  z-index: 1;
  width: 50px;
  position: relative;
  height: 50px;
}

input[type="range"]:before {
  content: "Modtag penge";
  color: #8a8a8a;
  position: absolute;
  left: 36%;
  top: 20px;
  z-index: 1;
  font-size: 16px;
}

input[type="range"]::-webkit-slider-thumb:before {
  position: absolute;
  left: 5px;
  top: -10px;
  z-index: 1;
  font-size: 56px;
  font-weight: bold;
  content: "→";
  background: url('https://cdn2.iconfinder.com/data/icons/arrows-1-2/380/Arrow_Right2-512.png');
}

<input #unlock type="range" class="slideToUnlock" value="0" max="100" (touchend)="checkUnlock($event)" (mouseout)="checkUnlock($event)">

Answer 1

除了我的评论你可以使用多个背景来保持圆形按钮:

input[type="range"] {
  width: 100%;
  background: linear-gradient(to bottom, #EDF1F0, #F6F8F7);
  -webkit-appearance: none;
  border-radius: 10px;
  padding: 5px;
  outline:none;
  position: relative;
  box-sizing:border-box;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  background: 
   url('https://cdn2.iconfinder.com/data/icons/arrows-1-2/380/Arrow_Right2-512.png') center/contain no-repeat content-box,
   lightgray;
  z-index: 1;
  width: 50px;
  position: relative;
  height: 50px;
  padding:5px; /* Offset the background image from the edges */
}

input[type="range"]:before {
  content: "Modtag penge";
  color: #8a8a8a;
  position: absolute;
  left: 36%;
  top: 20px;
  font-size: 16px;
}

<input #unlock type="range" class="slideToUnlock" value="0" max="100" (touchend)="checkUnlock($event)" (mouseout)="checkUnlock($event)">