1

私はMaterialize CSSを使用しており、フォームに範囲スライダーがあります。クリックすると色とサイズが変わる弾丸を作りたいです。しかし、私はそれを機能させることはできません。これが私がやろうとしていることです：

<p class="range-field"><input type="range" id="years" min="17" max="30" /></p>

    input[type="range"]::-moz-range-thumb {
    background: none repeat scroll 0 0 #277F31;
    border: medium none;
    border-radius: 50%;
    height: 14px;
    margin-top: -5px;
    width: 14px;
    }

    input[type="range"]:active:-moz-range-thumb {
    background: none repeat scroll 0 0 black;
    border: medium none;
    border-radius: 50%;
    height: 24px;
    margin-top: -5px;
    width: 24px;
    }

ただし、activeon CSS はここでは機能しません。フォーカスも試しましたが、まだ何もありません。

4

2 に答える 2

2

これは、最初の selector のように、疑似要素 (スライダーのつまみなど) に二重コロン表記を使用する必要があるためです。

input[type="range"]:active::-moz-range-thumb
                          ^^
                         two colons here

ブラウザ間の互換性を忘れないでください

::-webkit-slider-thumb /* for webkit based browsers */
::-ms-thumb /* Internet explorer 10+ */
于 2015-01-06T13:42:50.087 に答える