Verschieben der Checkbox auf der rechten Seite des Labels

Question

Ich frage mich, ob es eine Möglichkeit gibt, das Kontrollkästchen auf die rechte Seite des Etiketts zu verschieben? Standardmäßig ist es immer auf der linken Seite. Wie kann ich es nach rechts verschieben?

<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

Wie wäre es mit Floats?

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

Set style="float: right;" am Eingang. Zum Beispiel diese HTML:

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

Mit diesem CSS:

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

See: http://codepen.io/anon/pen/WpJPoK

Answer 3

verwenden die

direction:rtl; 

Sie es durch Floaten des Kästchens nach rechts separat tun können dann, um das Etikett nach links zu schweben, oder einfach mit dem Padding-rechts oder dem Rand nach links zu schweben, funktionieren beide s!

Answer 4

Gibt es einen Grund, warum Sie nicht das Etikett und die Eingabe um innerhalb des HTML tauschen?

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