Switch Styling

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 structure created by the client I'm working on).

I am trying to figure out what to look for in css, which causes a difference in the presentation of the radio buttons.

Two scenarios are as follows:

Wrong:

On right:

Can someone help with some tips on what to look for?

Maybe I should add that both pictures are from IE8.

Answer 1

I found the culprit:

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

This bit is on one page, not another. Therefore, either I have to delete it on one page, or add it to another so that they look the same.

Answer 2

Styling (EDIT: borders, colors, background) of the radio button itself in css is not possible. But you can hack a bit with hidden switches and overlay images as 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 switch and put the span right in its place, which when clicked changes its style:

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 this jsFiddle

Answer 3

Inspect both items using the Web Developer Tool. Press F12 in IE8, then click on the cursor icon in the upper left (or press Ctrl + B). Click on the switch to check it.

It is recommended that you use Google Chrome WDT because it can tell you more (for example, a linked CSS file) and is also easier and faster to use. You can right-click on the switch and click on “Inspect Element” to see more (DOM, CSS).

Answer 4

Switch styling is very limited, especially in older browsers. I wrote a tutorial on how to customize checkboxes and radio only using CSS, and also create on / off switches by styling a shortcut and using its :before and :after pseudo-classes. It has IE8 fallback protection. Maybe this helps :) Read here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs