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-icon-plusthick和.slider：之后需要追加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元素。尝试包裹输入并执行span：after

或者之后只使用img元素，因为这也可以。

添加另一个样式类之前和之后的样式输入范围

2 个答案: