0

I have a form with checkboxes and radio buttons, I need to give it height and vertical-align it to middle so as to align with label (it can have varying line height)

    input[type="checkbox"],input[type="radio"] {
    margin:0px;
    vertical-align: -webkit-baseline-middle;
    float: none;
    height: 38px;
  }

label {
 line-height: 38px;
}

You could see it at http://jsfiddle.net/9my3ksf3/1/

Nik
  • 705
  • 4
  • 12
  • Also, similar issue with scaling can be seen on http://jsfiddle.net/leaverou/zBuyN/ , this works for all browser and devices, except safari 8 onwards on Mac machine. – Nik Oct 06 '15 at 18:42

1 Answers1

-1

The checkboxes and radio buttons aren't working as expected because not all browsers listen to setting height and width of those inputs in the same way.

The height and width still exist but the button isn't rendering in that size, so when you click it it's moving within the container, which has the height you set. Why that is I don't know, but the height is the cause of the problem. Try removing it and the button should stop moving when you click it. I understand this isn't ideal, so perhaps a better question to ask is "How to set width and height of a radio/checkbox input in Safari?"

Here's a great article comparing the effects of setting width and height on radio buttons across different browsers: http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

John Li
  • 1