別のスタイルクラスを追加する前後のスタイル入力範囲

Question

私のjsfページで入力範囲を使用しています。私はui-icon-plusthick（プラスアイコン）とui-icon-minus（マイナスアイコン）を表示する必要があるので、入力範囲の前後に別のスタイルクラスを追加する必要があります。

.slider { 
 
    width: 100%; 
 
    height: 3px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    border: 0; 
 
    border-radius: 3px; 
 
}

<input id="slider1" type="range" min="100" max="500" step="10" class="slider" />

今私は.sliderが必要です.ui-アイコンplusthickと.sliderを追加する前に：UI-アイコンマイナスを追加する必要があります後。これは可能ですか？

Answer 1

インプットエレメントには、内容がないため、:beforeまたは:afterがありません。

使用することを

.ui-icon-plusthick:before { 
 
    content: '+'; 
 
    display: inline-block; 
 
} 
 
.ui-icon-minus:before { 
 
    content: '-'; 
 
    display: inline-block; 
 
} 
 

 
.input-wrapper { 
 
    vertical-align: middle; 
 
}

<div class="input-wrapper"> 
 
    <span class="ui-icon-minus"></span><input id="slider1" type="range" min="100" max="500" step="10" class="slider" /><span class="ui-icon-plusthick"></span> 
 
</div>

Answer 2

入力のためのいくつかのラッパーが持つことができません::前または::要素の後。入力の前後を折り返してスパンを実行してください：

または、後でimg要素を使用するだけで問題ありません。