Question

我正在创建垂直范围栏，我更改了-webkit-appearance : slider-vertical.

我还更改了输入范围栏的属性，例如height，width，webkit-slider-runnable-track和webkit-slider-thumb属性。

除了webkit-slider-thumb之外，所有输入范围属性都已更改。它被设置为默认属性。我甚至在webkit-slider-thumb中将webkit-appearance改为none。

在线代码：Jsfiddle

<head>
<style type="text/css">
input[type=range][orient=vertical] {
    -webkit-appearance: none;
    -webkit-appearance: slider-vertical;/*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
    width: 10%;
    height: 40%;
}

input[type=range][orient=vertical]::-webkit-slider-runnable-track {
    background: yellow;  
    border: 1px solid black; 
}

input[type=range]::-webkit-slider-thumb {
 /*all the below  css properties **not** applies to thumb*/
  height: 3vmin;
  width: 3vmin;
  border-radius: 50%;
  background-color : black;
}
</style>
</head>

<body>
    <input type="range" orient="vertical">
</body>

Answer 1

我担心这是不可能的。有关详细信息，请参阅[Google chrome vertical <input type="range" />]。

但是有一个很好的伎俩。 https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/#comment-1586472

input[type=range][orient=vertical] {
    -webkit-appearance: none;
    /*-webkit-appearance: slider-vertical; /*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
    width: 10%;
    height: 40%;
    transform: translateY(30px) rotate(90deg);
    transform-origin:bottom;  
}

input[type=range][orient=vertical]::-webkit-slider-runnable-track {
    background: yellow;  
    border: 1px solid black; 
}

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" orient="vertical" />

<input type =“range”/>样式在垂直时不适用于拇指

1 个答案: