1

タイプ範囲の入力があります

<input id="counter" type="range" min="0" ></input>

次のCSSで

#counter {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:10px;
    border-radius:50px;
    border-color:rgb(240, 61, 37);
}

#counter::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:15px;
    height:15px;
    border-radius:50px;
    content:"1";
    background:rgb(240, 61, 37);
    opacity:0.95;
}

こちらのライブデモ

content:"1";cssのがまったく機能していません。出力でテキストを赤い色のノブに設定する方法。

4

2 に答える 2

0

::-webkit-slider-thumbcontentプロパティを受け入れることができません。代わりに、背景画像を設定してみてください。

于 2013-01-24T13:18:19.743 に答える
0

::-webkit-slider-thumbはcontentプロパティを受け入れません。

スライダーサムをサムの幅の値の動的なツールチップとして使用しようとしているように聞こえます。

その場合は、cssを使用して親指の上に要素を配置できます。これにより、javascriptまたはjQueryを介して動的に値が取得されます。

私は現在作業中なので、後で例を作成しようとするかもしれませんが、ロジックは次のとおりです。

1）親指の上に、数字（後で親指の位置の値で更新）のみを含む要素（ツールチップと呼ばれる）を配置します。

2）親指の位置を見つける

3）javascriptを使用して、ツールチップの位置としても配置します。

4）.innerHTML（またはjQueryの場合は.html）を使用して、親指の位置をツールチップの値として配置します。

于 2019-03-17T18:24:35.863 に答える