100% width of input with customization

Can anyone have a solution (something like link or working example) for rounded corners input with width 100% and customizable right border of it.

Now I have this structure:

    <span class="rounded left-corner">
        <span class="rounded right-corner">
            <span class="rounded bg ">
                <input id="expoName" name="expoName" type="text" />
            </span>
        </span>
    </span>

and this styles:

.rounded.left-corner {
    background: url('/resources/images/base/input-left-border.png') no-repeat;
    height: 31px;
    display: inline-block;
    margin: 15px 0px;
}

.rounded.bg {
    background: url('/resources/images/base/input-bg.png') repeat-x;
    height: 31px;
    display: inline-block;
    margin: 0 19px;
}

.rounded.right-corner {
    background: right url('/resources/images/base/input-right-border.png') no-repeat;
    height: 31px;
    display: inline-b开发者_C百科lock;
}

.rounded input[type="text"] {
    height: 30px;
    outline: none;
    border: 0px;
    background-color: transparent;
    font-size: 18px;
    display: block;
}

Where input-right-border.png and input-left-border.png are 19*31 images for borders and input-bg.png is 19*1 image. Images gas round corners and shadows.

So if I want to customize right border for datepicker for example I do:

.rounded.startDate .right-corner {
    background: right url('/resources/images/base/input-startdate-right-border.png') no-repeat;
}

.rounded.startDate .bg {
    margin-right: 33px;
}

And if I set width of #expoName with absolute value all just fine. But now I want to 100% width of input field. So I try to find the other solution for this, but not succeded on it yet. So, any solutions or advice?

Here on stackoverflow I found this: http://jsfiddle.net/aP2Ju/3/ But this is not really what I want. Because of IE. You know -_-"

---

You could try that jsfiddle ( http://jsfiddle.net/aP2Ju/3/ )

with css3 pie ( http://www.css3pie.com )

And see if that works for you.