CODEWITHSUNDEEP
cssinternet-explorer-8radio-button
CJe
CJe

Reputation: 1992

Styling a radio button

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:

enter image description here

Right:

enter image description here

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

Maybe I should add that both pictures are from IE8.

Upvotes: 4

Views: 24958

Answers (4)

Felix Hagspiel
Felix Hagspiel

Reputation: 2947

Styling of radio buttons is very limited, especially in older browsers. I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. It has an IE8 fallback. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

Upvotes: 0

CJe
CJe

Reputation: 1992

I found the culprit:

<meta name="MSThemeCompatible" content="no">

This bit is in one page and not the other. So either I have to remove it in one page or add it to the other to make them look alike.

Upvotes: 1

Dominik Schreiber
Dominik Schreiber

Reputation: 2771

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

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

Upvotes: 9

Stocki
Stocki

Reputation: 473

Inspect both elements with Web Developer Tool. Press F12 in IE8 then click on the cursor icon top left (or press Ctrl+B). Click on the radio button to inspect it.

It is recommended use Google Chrome's WDT, 'cause it can tell you more (eg. related CSS file) plus easier and faster to use. You can right click on the radio button and click 'Inspect Element' to see more (DOM, CSS).

Upvotes: 1

Related Questions