Question

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

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

附上小提琴。我在＆＃39; Javascript＆＃39;中添加了进一步的评论。部分。我会非常感激任何帮助，我一直在试图做这项工作几个小时就撞到了墙上，显然我所做的事情在实践中是站不住脚的。提前致谢。

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

代码示例：

<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/

右对齐Boostrap中的伪复选框

1 个答案: