追加另一个样式类前后的样式输入范围

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：before来添加.ui-icon-plusthick和.slider：after来需要追加ui-icon-minus。 这可能吗？

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

输入不能包含:: before或:: after元素。 尝试在输入周围包裹一个并执行跨度：之后

或者只是在之后使用一个img元素，因为这也会起作用。