Styling a radio button

Question

I have a jQuery dialog on two different pages. For some reason the radio buttons look different (one page is pure HTML/Javascript and the other is created by some internal framework created by the customer I'm working for).

I'm trying to figure out what to look for in the css that causes the difference in radio button presentation.

The two scenarios look like this:

Wrong:

Right:

Can anyone help with some clues as to what to look for?

Maybe I should add that both pictures are from IE8.

Answer 1

Styling (EDIT: borders, colors, background of) a radio button itself is not possible in css. But you can hack a bit around with hidden radio buttons and overlaid images like described here

• http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
• http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/

Essentially you hide your radio button and put a span right at its place that, when clicked, changes its styling:

html

<label><input type="radio"><span class="overlay"></span> radio button</label>

css

input[type=radio] {
  opacity: 0;
  z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
  display: inline-block;
  position: relative;
  left: -1em; /* or whatever length you need here */
  height: 1em;
  width: 1em;
  background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
  background-color: green;
}

Try it in this jsFiddle