在 Bootstrap 中右对齐一个伪复选框

Question

我在 Boostrap 中看到了关于右对齐复选框的问题的答案，我在 Bootstrap 中看到了关于伪类使用图像作为复选框的问题的答案（尽管大多数那些忽略了标签的重叠，但我离题了。）

我正在寻找的是这些东西的组合：右对齐的复选框（标签文本位于复选框的左侧）使用图形元素替换复选框。）

Fiddle附上。我在 'Javascript' 部分添加了更多评论。任何帮助将不胜感激，为了使这项工作，我一直在用头撞墙数小时，显然我所做的在实践中是站不住脚的。提前致谢。

（注意：复选框替换图像是任意的，是快速搜索在线图像的产物，以说明功能上的差异。）

Fiddle: https://jsfiddle.net/qwucsh6x/8/

代码示例：

<body>
  <div>
    <input id="rjc" type="checkbox" class="pull-right"><label for="rjc" class="pull-right">right-justify checkbox</label>
  </div><div>
    <input id="sc" type="checkbox">
    <label for="sc">standard checkbox</label>
  </div><div>
    <input id="srjc" type="checkbox" class="rightStyled pull-right sr-only">
    <label for="srjc" class="pull-right">styled right-justify checkbox</label>
  </div><div>
    <input id="sty" type="checkbox" class="leftStyled sr-only">
    <label for="sty">styled checkbox</label>
  </div>
</body>

CSS:

input[type=checkbox].leftStyled + label {
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat;
    background-size:20px;
    text-indent:22px
}

input[type=checkbox]:checked.leftStyled + label  {
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat;
    background-size:20px;
    text-indent:22px
}

input[type=checkbox].rightStyled + label {
    background: url('http://image.flaticon.com/icons/png/128/61/61221.png') no-repeat;
    background-size:20px;
    text-indent:-162px
}

input[type=checkbox]:checked.rightStyled + label  {
    background: url('https://cdn2.iconfinder.com/data/icons/menu-interface-1/256/flat_unchecked-128.png') no-repeat;
    background-size:20px;
    text-indent:-162px
}

Answer 1

可能比您要找的要复杂一些，但我从您的标签中取出文本，并将其放入一个新标签中，该标签是该图片的标签。

<label for="srjclabel" class="pull-right">styled right-justify checkbox</label>
<label for="srjc" id="srjclabel" class="pull-right"></label>

https://jsfiddle.net/qwucsh6x/9/

在 Bootstrap 中右对齐一个伪复选框

right-justifying a pseudo-checkbox in Boostrap

css

pseudo-class

twitter-bootstrap-3