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
: 276 At:- 10/7/2017 7:53:48 AM
html css alignment checkbox-align-with-label






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





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