html - 100% 自定义输入宽度

Question

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

现在我有了这个结构:

    <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的图片。图像气体圆 Angular 和阴影。

因此，如果我想为日期选择器自定义右边框，例如我会这样做:

.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 )

看看这是否适合你。