css - html での iPhone のスポットライトのようなボックス

Question

私はIE 7を使用しています。私がやろうとしていることのより簡単なコードを誰かが提案できますか。

ここに私のhtmlがあります:

    <span id="mainSpan" class="deleteIcon">
        <input type="text" id="txt1" />
        <span id="btn" onclick="var x = document.getElementById('txt1'); x.value = ''; x.focus();"></span>
    </span>

そして私のCSS：

        input {
            font-size: 20px;
            width: 250px;
        }
        #mainSpan {
            position: relative;
            border: 1px #aaa inset;
        }
        span.deleteicon span {
            border: none;
            margin-left: 1px;
            position: absolute;
            display: block;
            top: 5px;
            width: 18px;
            height: 18px;
            background: url('file:///path-to-clear.png') no-repeat center;
            cursor: pointer;
        }
        span.deleteicon input {
            border: none;
            margin: 0px;
            padding-right: 0px;
        }

しかし、IE 7 では次のようになります。

iPhoneのスポットライトのようにしたい：

カーソルがボックス内にあるときに「クリア」ボタンを表示するには、cssまたはjavascriptが必要ですか? このような ..

他の新しいブラウザーでは簡単に実行できますが、IE 7 で使用する必要があります。

コードを共有できる人に感謝します。=D