expressionでactiveになった時の背景色などを変更

CSS

IE6は:activeなどaタグしか使えないので、エレメントがアクティブになった時に色を変える方法が結構面倒。
下記は、スタイルシートでexpressionを使って変える方法だけどScriptがONでないと使えない。

<style type="text/css">
    button {
        background: expression(document.activeElement == this ? '#ff0' : '#0ff');
        color     : expression(document.activeElement == this ? '#000' : '#f80');
    }
</style>
<body>
    <button>test1</button>
    <button>test2</button>
    <button>test3</button>
</body>

if文でなく?を使ったら出来た。




こんな感じでもできた。
まとめて変える時はこっちの方がいい気がする。

button {
    background: expression((function(o) {
            var ac = document.activeElement;
            with(o.style) {
                color  = (ac == o ? '#000' : '#ff0');
                border = (ac == o ? '1px solid #0f0' : '1px solid #00f');
            }
            return ac == o ? '#ff0' : '#f80';
        })(this));
}

追記
気がしただけで、若干こっちの方が動作が重い感じ。