0

css を使用して html5 の input type=range タグをカスタマイズしようとしていますが、これまでのところ webkit を使用して何かを作成しました。

div#timeline input[type="range"] {
    -webkit-appearance: none;
    background-color: darkgray;
    height: 2px;
        border-right: black solid 4px;
        border-left: black solid 4px;
}

div#timeline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: 0px;
    z-index: 1;
    width: 16px;
    height: 8px;
    background: #696060;
}

ただし、これはクロムでのみ機能するようですが、すべてのブラウザで同じになるようにカスタムスライダーを作成することは可能ですか? 入力範囲の動作をエミュレートするものを作成することを考えていましたが、オンラインで何も見つけることができず、javascript などに慣れていません。

4

1 に答える 1

0

jQueryUI や jQueryTools などの JavaScript ライブラリを使用してみてください。最後の 1 つには、非常に単純なデモがあります。

http://jquerytools.org/release-notes/index.html#form

残念ながら、現在のところ純粋な CSS だけでは入力範囲をクロスブラウザーの方法でスタイル設定することはできません。もう少し待つ必要があります。

于 2013-04-12T18:53:53.280 に答える