css - 在 safari 中设置焦点输入的样式

Question

我正在尝试将自定义样式应用于输入 [type=range]，但在 Safari 中应用这些样式时遇到问题。 Chrome、FF 和 IE 工作正常(尽管 FF 和 IE 未在下面的代码片段中列出)。 pe-color() 是调用存储变量颜色的外部 scss 函数。

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  width: 12%;
  outline: none;
  background: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: $slider-track-height;
  background: pe-color(hyperdrive);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid pe-color(hairline-gray);
  height: $slider-thumb-diameter;
  width: $slider-thumb-diameter;
  border-radius: 50%;
  background: pe-color(white);
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-thumb {
  border: 1px solid pe-color(basic-blue);
  box-shadow: 0px 0px 5px pe-color(basic-blue);
}
input[type=range]::-moz-focus-outer {
  border: 0;
}
input[type=range]::-moz-range-track {
  height: $slider-track-height;
  background: pe-color(hyperdrive);
  border: none;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid pe-color(hairline-gray);
  height: $slider-thumb-diameter;
  width: $slider-thumb-diameter;
  border-radius: 50%;
  background: pe-color(white);
}
input[type=range]:focus::-moz-range-thumb {
  border: 1px solid pe-color(basic-blue);
  box-shadow: 0px 0px 5px pe-color(basic-blue);
}
input[type=range]::-ms-track {
  height: $slider-track-height;
  border-color: transparent;
  border-width: 11px 0;
  background: transparent;
  color: transparent;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid pe-color(hairline-gray);
  height: $slider-thumb-diameter;
  width: $slider-thumb-diameter;
  border-radius: 50%;
  background: pe-color(white);
}
input[type=range]::-ms-fill-lower {
  background: pe-color(hyperdrive);
}
input[type=range]::-ms-fill-upper {
  background: pe-color(hyperdrive);
}
input[type=range]:focus::-ms-thumb {
  border: 1px solid pe-color(basic-blue);
  box-shadow: 0px 0px 5px pe-color(basic-blue);
}

通过各种谷歌搜索，我看到了关于“大纲”样式的内容，但我没有成功使用它。如果存在针对此元素的伪类样式，希望获得一些见解。

Answer 1

你要找的都在这里https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

您没有看到任何更改的原因是您可能没有覆盖默认的浏览器样式并且没有删除 slider 的所有轮廓和图像。

查看此代码笔并随意使用它 http://codepen.io/vveleva/pen/gwBbGB

input[type=range] {
  -webkit-appearance: none; /* Hides browser default slider */
  width: 100%;
  background: transparent;
}

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

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

input[type=range]:focus::-webkit-slider-thumb {
  /* changes slider on click and drag */
  border: 1px solid red;
  box-shadow: 0px 0px 5px red;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000;
  height: 26px;
  width: 26px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 1px 1px 1px #000, 0px 0px 1px #0d0d0d;
}



input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  box-shadow: 1px 1px 5px black;
  background: gray;
  border-radius: 1.3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: blue;
  border: 0.2px solid red;
}

希望对您有所帮助!