100% 宽度的自定义输入

Question

任何人都可以为宽度为 100% 和可自定义右边框的圆角输入提供解决方案（例如链接或工作示例）。

现在我有了这个结构：

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

还有这种风格：

.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-block;
}

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

其中 input-right-border.png 和 input-left-border.png 是 19*31 的边框图像，而 input-bg.png 是 19*1 的图像。图像气体圆角和阴影。

因此，如果我想为 datepicker 自定义右边框，例如，我会这样做：

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

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

如果我用绝对值设置#expoName 的宽度，一切都很好。但现在我想要输入字段的 100% 宽度。因此，我尝试为此找到其他解决方案，但尚未成功。那么，有什么解决方案或建议吗？

在 stackoverflow 上我发现了这个：http://jsfiddle.net/aP2Ju/3/ 但这并不是我真正想要的。因为IE。你知道-_-”

Answer 1

你可以试试那个 jsfiddle (http://jsfiddle.net/aP2Ju/3/)

使用 css3 派（http://www.css3pie.com）

看看这是否适合你。