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 pie（http://www.css3pie.com）

看看它是否适合你。

100％宽度的输入与定制

1 个答案: