Question

How can I get an input type=”radio” the same style in all browsers. I am trying to get 3 radio buttons from left to right accross the page with the radio button and text centered in all IE9, Chrome, and FF using css. I am using all diffferent types or vertical align and padding which works on some but browsers but not all.

<input class="text-bottom" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome
<input class="middle" type="radio" value="1"  name="ProcessingComplete">Works in IE
<input class="top" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome

.middle
{
vertical-align: middle;
}
.top
{
vertical-align: top;
}
.text-bottom
{
vertical-align:text-bottom;
}

Answer 1

As pointed out by Dario on Radio/checkbox alignment in HTML/CSS, try this:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

Also, keep in mind it is best practice to wrap your radio button labels using the <label> tag.

See DEMO.