Question

我有这个表/滑块错误，但我不确定如何修复它以保留在表中： http://jsfiddle.net/WH7Kf/1/ 我的CSS是：

input[type='range']{
    -webkit-appearance: none !important;
    margin: 0px;
    padding: 0px;
    background: #000;
    height: 100px;
    width: 400px;
    border-bottom: #333 1px solid;
    -webkit-transform: rotate(90deg);
}

我的HTML5是：

<table>
<tr>
    <td>VOLUME</td>
    <td>TONE</td>
</tr>
<tr>
    <td>volume:<input id="volumeslider" type="range" min="0" max="100" step=".1"></td>
    <td><input id="tone" type="range" min="40" max="17000" step="1">    //seekslider</td>
</tr>
</table>

Answer 1

转动桌子，然后将单词翻到最后： http://jsfiddle.net/WH7Kf/14/

table{
    position:absolute;
    top:150px;
    -webkit-transform: rotate(90deg);
}

input[type='range']{
            position: relative;
            -webkit-appearance: none !important;
            margin: 0px;
            padding: 0px;
            background: #000;
            height: 100px;
            width: 400px;
            border-bottom: #333 1px solid;
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            background: radial-gradient(#FFF, #333);
            height:110px;
            width:15px;
            border-radius:100%;
            cursor:pointer;
        }

Answer 2

我试着摆弄代码，最初我认为滑块的高度会有问题，但后来才意识到这是宽度。使用它并根据需要更改宽度（不是400px）。

    input[type='range']{
        -webkit-appearance: none !important;
        margin: 0px;
        padding: 0px;
        background: #000;
        height: 100px;
        width: 200px;
        border-bottom: #333 1px solid;
        -webkit-transform: rotate(90deg);
    }

如何使用CSS的HTML Slider保留在框中？

2 个答案: