Styling a radio button

24,275

Solution 1

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.

Solution 2

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

Solution 3

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).

24,275

Author by

CJe

Updated on July 16, 2022

Comments

CJe almost 2 years

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.
Armen Michaeli almost 11 years

-1 for "styling a radio button itself is impossible with CSS". First of all, the article you link to shows how to do it with CSS (and so invalidates your statement), second, it is rather achieveavle, and third, I have done it. With CSS. P.S. "-1" is symbolic, I won't take away from you useful answer.
t.niese almost 11 years

FF (latest) also has this functionality integrated (no firebug required anymore).
Dominik Schreiber almost 11 years

What I meant is that you can't change the background or border of a radio button: jsfiddle.net/ABQSv. (If you can, I was totally wrong and admit everything. But show me.) You sure can style a radio button with pure css (like its position, opacity, whatever), but I think this was not how it was meant.
Dominik Schreiber almost 11 years

Did some cross-browser checks, indeed it does work in (pre-blink) Opera and Internet explorer. Shame on me. (But not working in Firefox/Webkit is a major concern I think...)
CJe almost 11 years

I think I found something going through loads of css files: A CSS filter definition. I hope removing this will help. Just waiting for the site to be redeployed.
CJe almost 11 years

Well... removing the filter made my text look better but the actual radio button is still displayed in two different ways.
Armen Michaeli almost 11 years

@Dominik Schreiber, you can change both the background and the border of a radio button, and pretty much any other form control. You need to apply the -webkit-appearance: none rule first though, which gets rid of all visual style of the control. And of course this only works in Webkit browsers. Other browsers may have their own vendor specific appearance CSS extension.