ラベルの右側にチェックボックスを移動

Question

ラベルの右側にチェックボックスを移動する方法があるのでしょうか？デフォルトでは、常に左に表示されます。どのように私はそれを右にシフトできますか？

<style> 
input[type=checkbox].css-checkbox { 
    position:absolute; 
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0; 
    border:0; 
} 
input[type=checkbox].css-checkbox + label.css-label { 
    height: 28px; 
    display: inline-block; 
    line-height: 28px; 
    background-repeat: no-repeat; 
    cursor: pointer; 
} 
input[type=checkbox].css-checkbox:checked + label.css-label { 
    background-position: 0 -28px; 
} 
label.css-label { 
    background-image: url(wp-content/uploads/2017/02/cb.png); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
</style> 

HTML

<input type="checkbox" id="checkboxG1" class="css-checkbox" /> 
<label for="checkboxG1" class="css-label">TEXT</label> 

Answer 1

フロートの使用はどうですか？

div.wrapper { float:left;} 
 
div.wrapper label { float: left; width: 75%; text-align: right; } 
 
div.wrapper span { float: right; width: 20%; text-align: left; } 
 
div.clearboth { clear: both }

<div class="wrapper"> 
 
     <label for="myCheckBox">TEXT</label> 
 
     <span><input name="myCheckBox" id="myCheckBox" type="checkbox" /></span> 
 
     <div class="clearboth"></div> 
 
</div>

Answer 2

入力に設定しstyle="float: right;"。たとえば、このHTML：このCSSで

<div> 
<input type="checkbox" id="checkboxG1" class="css-checkbox" /> 
<label for="checkboxG1" class="css-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label> 
</div> 

：

div{width: 300px;} 
.css-checkbox {float: right;} 
.css-label {display: block; text-align: right;} 

参照：http://codepen.io/anon/pen/WpJPoK

Answer 3

は、あなたが右にあるチェックボックスを浮動によって別個にそれを行うことができます

direction:rtl; 

を使用ラベルを左に浮かべたり、右に余白を付けたり、余白を残して浮動させたりすることができますs！

Answer 4

あなたがHTML内のラベルや周りの入力を入れ替えることができない理由がある ？

<label for="checkboxG1" class="css-label">TEXT</label> 
 
<input type="checkbox" id="checkboxG1" class="css-checkbox" />