使用:: before in chrome

Question

我正试图在此image上设置滑块的样式。一切都适用于Safari，但似乎chrome在定义另一个伪属性的伪属性时遇到问题。具体这不起作用 - input[type=range]::-webkit-slider-thumb::before

以下是代码：

.panel {
  position: relative;
  width: 500px;
  margin-left: 50px;
}

.sections {
  position: absolute;
  width: 100%;
  height: 40px;
  overflow: hidden;
}

.sections-inner {
  position: absolute;
  width: 100%;
  height: 10px;
  top: calc(50% - 5px);
}

.section-1 {
  margin-left: 20%;
  width: 40%;
  height: 100%;
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
}

.section-2 {
  margin-left: 70%;
  background: pink;
  width: 30%;
  height: 100%;
}

.range-wrapper {
  display: flex;
  height: 40px;
  justify-content: center;
}

.range-picker {
  width: 100%;
  position: relative;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 24px;
  width: 1px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: -6px;
}

input[type=range]::-webkit-slider-thumb::before {
  content: "";
  display: block;
  width: 24px;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  border: 1px solid #000;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0)
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  background: transparent;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

<div class="panel">
  <div class="sections">
    <div class="sections-inner">
      <div class="section-1">
      </div>
      <div class="section-2">
      </div>
    </div>
  </div>
  <div class="range-wrapper">
    <input type="range" class="range-picker" min="0" max="100" value="20"/>
  </div>
</div>

有没有人有想法，我怎样才能达到Chrome的目的？谢谢你的任何建议。

Answer 1

更新

可以使用linear-gradient

代替使用图片

这似乎在Chrome中不起作用，因此我能提出的最接近的是background-image

.panel {
  position: relative;
  width: 400px;
  margin: 30px 10px;
}

.sections {
  position: absolute;
  width: calc(100% - 10px);
  height: 40px;
  overflow: hidden;
}

.sections-inner {
  position: absolute;
  width: 100%;
  height: 10px;
  top: calc(50% - 5px);
}

.section-1 {
  margin-left: 20%;
  width: 40%;
  height: 100%;
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
}

.section-2 {
  margin-left: 70%;
  background: pink;
  width: 30%;
  height: 100%;
}

.range-wrapper {
  display: flex;
  height: 40px;
  justify-content: center;
  position: relative;
}
.range-wrapper::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  right: 9px; height: 12px;
  transform: translateY(-50%);
  border: 0.2px solid black;
}

.range-picker {
  width: 100%;
  position: relative;
}

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  margin: 0;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: linear-gradient(to right, black, black) no-repeat center;
  background-size: 1px 13px;
  height: 24px;
  width: 19px;
  border: 1px solid black;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  background: transparent;
  border-radius: 1.3px;
  margin-left: -5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

<div class="panel">
  <div class="sections">
    <div class="sections-inner">
      <div class="section-1">
      </div>
      <div class="section-2">
      </div>
    </div>
  </div>
  <div class="range-wrapper">
    <input type="range" class="range-picker" min="0" max="100" value="20"/>
  </div>
</div>