CODEWITHSUNDEEP
htmlcss
user6224087
user6224087

Reputation:

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>

Upvotes: 3

Views: 17944

Answers (4)

jbutler483
jbutler483

Reputation: 24529

Is there a reason you can't swap the label and input around within the HTML?

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

Upvotes: 7

Theodore K.
Theodore K.

Reputation: 5176

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>

Upvotes: 4

Burhan Kashour
Burhan Kashour

Reputation: 677

use the

direction:rtl;

you can do it separately by floating the checkbox to right then to float the label to left, or just float it right with padding-right or margin left, both works!

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12582

Set style="float: right;" on the input. For example this 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>

With this CSS:

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

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

Upvotes: 2

Related Questions