为垂直 HTML5 范围输入框设置样式

Question

我正在尝试样式化一个垂直范围输入框，下面是我的代码:

input[type='range'] {
    -webkit-appearance: slider-vertical;
    background-color: #ccc;
    height: 158px;
    width: 2px;
    margin: 8px auto;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 20px;
    background-color: #3ebede;
    height: 30px;
    width: 30px;
}

但似乎因为我使用了 '-webkit-appearance: slider-vertical;' 让它垂直，样式不会应用。

有没有一种方法可以在不使用转换/插件的情况下为垂直范围设置样式...？

注：我只需要它在Chrome上工作

更新： 这是我所拥有的JSFiddle。

- Amira L.

---

给你这个 :) - misterManSam

所以你需要使用这些其他选择器。这里有一些在fiddle中的例子。 - misterManSam

Answer 1

所以这是一个答案，我想。您需要使用其他选择器。在这里阅读更多信息。

-webkit-transform:rotate(90deg); - 使其垂直，调整边距以适应。

谷歌是你的朋友！

从文章中：

基于 WEBKIT 的浏览器（CHROME、SAFARI、OPERA）

在基于 webkit 的浏览器中，轨道使用特殊伪选择器 ::-webkit-slider-runnable-track 进行样式设置，而拇指则使用 ::webkit-slider-thumb 进行样式设置。

也可以在拇指和轨道上应用自定义焦点样式。如果您选择这条路线，则必须删除输入本身的默认焦点样式。

这里有 一个 fiddle 示例。CSS 取自我的先前来源。

HTML

<input type="range" />

CSS

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

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

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

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

- misterManSam

---

好吧，这不是我想要的 - 选择器没问题，它们只是似乎与“-webkit-appearance：slider-vertical”不兼容，而我使用它使其垂直。 - Amira L.

发挥创意吧！-webkit-transform:rotate(90deg); 这里有一个垂直变换的例子 - misterManSam

我觉得你并没有真正阅读我所问的内容 - 这是否可以在不进行转换的情况下实现？ - Amira L.

从我使用谷歌搜索的结果来看，好像不行。我可能错了，但似乎唯一的方法是删除“-webkit-appearance”并重新创建滑块样式。这是一个相当不错的解决方案，不是吗？你本质上要求一个垂直滑块，现在有了一个垂直滑块 :) - misterManSam

@Resonance - 注意我说的是"transform:rotate(90deg); - 让它垂直，调整边距以适应"，这解决了问题的垂直方面。 - misterManSam