Html Mac和Windows环境下的Google Chrome浏览器，输入类型=范围

我正在使用HTML5属性输入type=“range”，我需要在属性前后使用-和+符号

我无法正确对齐它。在MAC中，如果我设置css样式，它不适合windows。浏览器保持不变。谷歌浏览器。这是jsfiddle

我保留html，不共享css，因为它不局限于任何代码集

   <label>-</label>
   <input type="range" name="points" class="rangeClass" min="0" max="10">
  <label>+</label>

-
+

让我再解释一下这个问题。我在Mac和Windows环境下使用Google Chrome浏览器。css样式不适合两者。仍然没有使用firefox进行测试

---

这是你的电话号码。更新了输入范围的css样式。

尝试改用伪类：

.输入{
位置：相对位置；
}
.输入-范围{
&：之前，
&：之后{
位置：绝对位置；
排名：0；
宽度：10px；
高度：15px；
文本对齐：居中；
内容:'一';；
}
&：之前{
左：-15px；
内容:'一';；
}
&：之后{
右图：-15px；
内容：“+”；
}

尝试过。没有解决问题。解决方案会在这里发挥作用吗？只是一个疑问。您好。我已经用css样式更新了我的JSFIDLE。现在您可以看到-和+已经更改了它的位置。

<input type="range" name="points" class="input input--range" min="0" max="10">


.input {
    position: relative;
}

.input--range {

    &:before,
    &:after {
        position: absolute;
        top: 0;
        width: 10px;
        height: 15px;
        text-align: center;
        content: '-';
    }

    &:before {
        left: -15px;
        content: '-';
    }

    &:after {
        right: -15px;
        content: '+';
    }