右對齊Boostrap中的僞複選框

我在Boostrap中看到了關於右對齊複選框的問題的答案，並且我看到了有關僞類在Bootstrap中使用圖像複選框的問題的答案（儘管大多數忽略標籤的重疊，但我離題了。）右對齊Boostrap中的僞複選框

我在找的是這些東西的組合：右對齊複選框（在複選框左邊有標籤文本）使用圖形元素替換複選框）。

小提琴附加。我在'Javascript'部分添加了更多評論。任何幫助將不勝感激，我一直在試圖做這項工作幾個小時撞牆，顯然我設法做的是在實踐中站不住腳。提前致謝。

（注：該複選框更換圖像是任意的，一個非常快速的搜索在線圖像的產品功能說明的差別）

代碼示例：

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

來源

2016-11-28 Paul Caron

可能會比你想要的有點冒險，但是我把文本從你有的標籤中拿出來，然後把它放在一個新的標籤上，這個標籤就是這張圖片的標籤。

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

來源

2016-11-28 23:23:53

謝謝！我通過使用跨度而不是第二個標籤來進一步採用這種方法。我也希望僞標籤切換複選框，所以我添加了一個單擊事件處理程序。仍然有點哈克，但它的作品。感謝您指點我正確的方向。更新：https：//jsfiddle.net/qwucsh6x/10/ –

右對齊Boostrap中的僞複選框

回答

相關問題