iPhone's spotlight-like box in html

Question

I'm using IE 7 . can anyone suggest a simpler code for what I'm trying to do .

here's my 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>

and my 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;
        }

but it looks like this in IE 7:

i want to make it like the spotlight in an iPhone:

and do I need css or javascript if i want the 'clear' button to show up when cursor is in the box ? like this ..

it's easy to do it in other newer browsers but need to use it on IE 7 .

thanks for anyone who can share their code . =D

Answer 1

Try ccs3pie

It helps with ancient IEs. You'll be able to use border radius and other cool stuff.