Filterを使って丸いボタン

CSS JS

だいぶ前にも少し触れたけど、やることも書くこともないのでまたｗ
スタイルシートの記述内だけで、画像を使わず丸いボタンに。
しかしながら、Filterを使っているのでIEのみみたいです。

フォーカスされると枠線が出てしまうのが難だなぁ。


ソースはこんな感じ。

<style type="text/css">
    .test button {
        width     : 30px;
        height    : 30px;
        font      : bold 80%;
        background: expression(document.activeElement == this ? '#ff0' : '#0ff');
        filter    : alpha(opacity=100 style=2);
        color     : #000;
        padding   : 3px;
        cursor    : pointer;
    }
</style>

<body>
    <div class=test>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>10</button>
    </div>
</body>


フォーカスにならないように

object.onfocus = function() {this.blur()};

このようにするとできるんだけど、そうすると色が変えられん。

追記

点線の枠を出さない方法がわかった。

<button hideFocus=true>1</button>

これでＯＫ。