在我的复选框滑块附近添加文本

Question

我使用滑块替换了我的复选框。

<div class="col-sm-4">
    <label class="switch small">
        <input type="checkbox">
        <div class="slider small"></div>
    </label>
</div>

https://jsfiddle.net/dky16b53/

如何在每个滑块附近添加一些文字？

感谢。

Answer 1

我刚刚发现了它。为每个辅助文字添加<span>，并在其上加position: absolute和margin。

编辑：现在有选中/取消选中功能：

https://jsfiddle.net/dky16b53/2/

HTML：

<label class="switch small">
    <input type="checkbox">
    <div class="slider small"></div>
</label>
<span>More Text</span>

CSS：

..existing code 

div span {
  position: absolute;
  margin-left: 5px;
}

Answer 2

在标签标签后放置一些文字，但仍在div.col-sm-4中。请参阅下面的span元素。

<div class="col-sm-4">
    <label class="switch small">
        <input type="checkbox">
        <div class="slider small"></div>
    </label>
    <span>Text next to slider</span>
</div>