html radio button same style in all browsers

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;
}

Sorry, as I said I was using vertical align and playing around with the padding but unfortunately I could not get padding to make any real difference — WillNZ, Feb 07 '13 at 22:00
Yeah, that's rough. If it's really important, you might want to consider replacing the radio buttons with your own custom elements as described [here](http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/) (among many other places). — showdev, Feb 07 '13 at 22:04
@showdev I am getting a 403 Forbidden when trying your link. Unfortunately I am just trying to style someone elses code from an MVC project so not sure if I can change the radio buttons to custom elements — WillNZ, Feb 07 '13 at 22:11

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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.

edited May 23 '17 at 10:24

Community

1
1

answered Feb 07 '13 at 22:11

zxqx

5,115
2
20
28

html radio button same style in all browsers

1 Answers1