1 Comment

Selectivizr – Pseudo Selector Support for IE

Working with visuals for HTML forms can be painful. They are ugly, clunky, and tend to be different in each browser.

One way we have been spicing up our forms is by improving the look of the checkbox and radio button areas. Making toggles and visual cues for standard form elements will make forms feel more interactive. The styling can be done with CSS alone, using pseudo selectors, or with JavaScript to put classes on elements, depending on the state. Unfortunately, Internet Explorer doesn’t play nicely with pseudo selectors, but we can fix that.

In forms where there are tag selections (checkbox) or an icon selection for the item we are creating (radio buttons), we try to make the visuals nicer:
iPhone Style Radio and Checkbox Switches using jQuery and CSS

This can be accomplished with HTML and CSS like this:

<div>
  <input type="checkbox" class="check-with-label" />
  <label class="label-for-check">My Label</label>
<div>

Unfortunately, as noted previously, Internet Explorer doesn’t like pseudo selectors and will not provide the effects. We can bring in a JavaScript library called Selectivizr to help bring in the pseudo selector support. You need to have another javascript library loaded, such as jQuery, dojo, prototype, Mootools, or others. You can add it to your project by putting this snippet in your HTML head section (filling in the JS Library with the proper includes from your choice from the ones listed):

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

Aside from some lack of support on rounded edges, gradients, and other things that CSS3PIE can help with, you will have the pseudo selector support needed to make the form elements a little bit nicer!