Shubham Jha Shubham Jha -4 years ago 180
CSS Question

Shifting checkbox to the right of label

I was wondering if there is a way to shift the checkbox to the right side of the label? By default its always on the left. How can I shift it to the right?

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

What about using 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download