Html 100%输入宽度，可定制

任何人都可以有一个圆角输入的解决方案（比如链接或工作示例），宽度为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>

其中，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上我发现了这个：但这并不是我真正想要的。因为IE，你知道-“

你可以试试JSFIDLE（）

使用css3饼图（）

---

看看这是否对您有效。

我真的不想在项目中再包含一个库。所以现在我找到了另一个解决方案。我需要设置容器的宽度，而不是输入。但它可以工作。好吧。如果您已经在其中添加了jquery。您可以使用它来获取元素宽度，并将该值设置到元素本身中。..Im当然，我认为这是一种糟糕的风格。正因为如此，我现在为每个字段容器创建id并在css中设置宽度，而不是查找字段父项并将其宽度设置为我想要的宽度。在JS中减少样式-好主意），但感谢您的回复

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

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