CSS attribute matching and browsers

The goal is to have a blinking cursor. One approach I tried out, was through the use of attribute selectors, where making the cursor visible or not would be a matter of changing an attribute value.

Here's the HTML element:

<font id="cursor" class="cursor" shown="yes">

And the javascript to change the custom "shown" attribute:

if (cursorElement.getAttribute("shown") == "yes")
  cursorElement.setAttribute("shown", "no")
else
  cursorElement.setAttribute("shown", "yes")

With the following style sheet entries:

.cursor[shown="yes"] {
  color: #7799CC;
  background-color: rgb(241,128,22);
}

.cursor[shown="no"] {
  color: white;
  background-color: #7799CC;
}

This works perfectly in Firefox 3.5.6, but Internet Explorer 8.0 completely refuses to recognise the custom attribute. I'm not sure if there is a way in which this can be made to work in IE without defining custom DTD entries, but for now, I've gone back to an approach where I change the element class to make it blink.