how to align checkbox with Label using HTML CSS (Should work in all browser)?


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


Asked by:- jaiprakash
1
: 12365 At:- 10/7/2017 7:53:48 AM
html css alignment checkbox-align-with-label



add comment to question



1 Answers
profileImage 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>

Fiddle Example here

Another simple Inline CSS code would be

<input type="checkbox" />
<label style="font-size: 16px;position: relative;top: -2px;">This is the label</label>
2
At:- 10/7/2017 11:29:35 AM


comment to above answer

Patreon Become a Patron


Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Related Articles
4168
Responsive center image using pure CSS or Bootstrap 3/4
3067
Creating copy to clipboard using Javascript or jQuery
1422
Add text on mouseover or hover element in HTML
2915
Rotate image using HTML and CSS

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly


Related Questions