Custom checkboxes, aligning label middle

0 votes
asked Sep 12, 2017 by john

I'm having problem aligning my labels to the middle of the checkboxes. I have tried everything it seems and after hours of testing i'm finally giving up.

I have tested with display: inline-block, vertical-align: middle; but nothing seems to work. I have however found out that putting characters into content:'' makes the text float top.

I think i'm missing something...

JSFiddle

.styled-checkbox { position: absolute; opacity: 0;
}
.styled-checkbox + label { position: relative; cursor: pointer; padding: 0; color: inherit; font-size: inherit;
}
.styled-checkbox + label:before { content: ''; margin-right: 10px; display: inline-block; width: 28px; height: 28px; background: #cad1d9; border-radius: 3px;
}
.styled-checkbox:hover + label:before { background: #f35429;
}
.styled-checkbox:focus + label:before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before { background: #f35429;
}
.styled-checkbox:disabled + label { color: #b8b8b8; cursor: auto;
}
.styled-checkbox:disabled + label:before { box-shadow: none; background: #ddd;
}
.styled-checkbox:checked + label:after { content: ''; position: absolute; left: 5px; top: 0px; background: white; width: 3px; height: 3px; box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label> 

1 Answer

+2 votes
answered Mar 13, 2018 by manish-patel

Add vertical-align: middle in :before selector and set top position in :after

.styled-checkbox { position: absolute; opacity: 0;
}
.styled-checkbox + label { position: relative; cursor: pointer; padding: 0; color: inherit; font-size: inherit;
}
.styled-checkbox + label:before { content: ''; margin-right: 10px; display: inline-block; width: 28px; height: 28px; background: #cad1d9; border-radius: 3px; vertical-align: middle;
}
.styled-checkbox:hover + label:before { background: #f35429;
}
.styled-checkbox:focus + label:before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before { background: #f35429;
}
.styled-checkbox:disabled + label { color: #b8b8b8; cursor: auto;
}
.styled-checkbox:disabled + label:before { box-shadow: none; background: #ddd;
}
.styled-checkbox:checked + label:after { content: ''; position: absolute; left: 5px; top: 9px; background: white; width: 3px; height: 3px; box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label> 
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...