html - 设置 <input type ="range"> 标记每一侧的文本样式

Question

我想为标签两侧的文字添加一些 CSS 样式。

这是我的代码:

<fieldset>
    <legend>Your Indicators</legend><br>
        <label for="height" class="margin">Height:</label>
        Short<input type="range" id="height" name="height" min="0" max="100">Tall<br>
        <label for="salary" class="margin">Salary:</label>
        Poor<input type="range" id="salary" name="salary" min="0" max="100">Rich
</fieldset>

Answer 1

您可以使用类将两侧的文本包裹在 span 中，然后通过 CSS 按类设置它们的样式，如下所示。

现场演示:

fieldset > * {
    vertical-align: middle;
}

.leftlabel, .rightlabel {
    display: inline-block;
    width: 50px;
    padding: 2px;
    text-align: center;
}

.leftlabel {
    background-color: red;
    color: white;
}
.rightlabel {
    background-color: purple;
    color: white;
}

label {
    display: inline-block;
    width: 50px;
}

<fieldset>
    <legend>Your Indicators</legend><br>
      <label for="height" class="margin">Height:</label>
      <span class="leftlabel">Short</span>
      <input type="range" id="height" name="height" min="0" max="200" style="width: 200px">
      <span class="rightlabel">Tall</span>
      <br>
      <label for="salary" class="margin">Salary:</label>
      <span class="leftlabel">Poor</span>
      <input type="range" id="salary" name="salary" min="0" max="200" style="width: 200px">
      <span class="rightlabel">Rich</span>
  </fieldset>

JSFiddle 版本:https://jsfiddle.net/sf2cz8yL/3/