在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浏览器。你将能够使用边缘半径和其他很酷的东西。