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

Answer 1

尝试 ccs3pie

它有助于古老的 IE。您将能够使用边界半径和其他很酷的东西。