How can I simply align my checkbox with Label text using HTML CSS, so that it works in all browsers consistently?
I am facing this issue in some browsers, if it works in chrome, it doesn't work in IE or if it works properly in Firefox it doesn't align properly in chrome.
So want to align Checkbox with Label text properly which can work in all browsers equally? Reference code
<div>
<label>
<input type="checkbox" /> Checkbox Label
</label>
</div>thanks
Answered by:- Sam
If you want to go with above HTML code only, i.e. means html would be without wrapping label text, your HTML /CSS code to align checkbox with Label properly can be
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}<label>
<input type="checkbox">
Label text
</label>Another simple Inline CSS code would be
<input type="checkbox" />
<label style="font-size: 16px;position: relative;top: -2px;">This is the label</label>Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly
Buy us a coffee
Become a Patron