Left-Align Custom Checkbox and Center Text Inside Div (Input + Div)

1
votes

Thanks in advance for your help.

So I have custom checkbox inputs. When you click the label or the input the div's border and the label text change colors, and the check appears.

The only issue is, I need the check to align left, while the text remains centered, regardless of the checkbox status (currently when the checkbox is checked, the label jumps over to the right). Any idea how to get the checkbox to the left and keep the text centered, and stationary?

Here's my code:

CSS:

div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased; 
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}

label {
display:inline;
text-align:center;
}

input[type=checkbox] {
display: none;
}

input:checked + div {
border: solid 1px red;
color: #F00;
}

input:checked + div:before {
content: "\2713";
}

HTML:

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label><br>
</div>
1
csscheckbox

1 Answers

0
votes

Add absolute position to input:checked + div:before ... like this :

input:checked + div:before {
content: "\2713";
position: absolute;
margin-left: -50px;
}