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
: 2721 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


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
207
Login and registration form in HTML, CSS and Bootstrap 4
148
Understanding Bootstrap 4 grid system (With various layout examples)
190
Useful CSS animation examples with code & animation basics

Subscribe Now

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


Related Questions