您将使用什么HTML/CSS来创建具有背景的文本输入？

Question

我的网站设计包括文本输入字段,如下所示:

输入字段http://img401.imageshack.us/img401/4453/picture1ts2.png

我想知道创建这个输入字段的最佳解决方案是什么.

我的一个想法是在输入周围始终使用背景图像并在输入字段上禁用所有边框并指定宽度(以像素为单位),例如:

<div class="borderedInput"><input type="text" /></div>

我试图阻止他们使用这种格式,但他们不会气馁,所以看起来我将不得不这样做.

这是最好还是有另一种方式？

-

试用:

我尝试了以下方法:

<style type="text/css">
input.custom {
    background-color: #fff;
    background:url(/images/input-bkg-w173.gif) no-repeat;
    width:173px;
    height:28px;
    padding:8px 5px 4px 5px;
    border:none;
    font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />

但在IE(6和7)中,当您输入的宽度超过宽度时,它会执行以下操作:

超长http://img240.imageshack.us/img240/1417/picture2kp8.png

Answer 1

我这样做:

<style type="text/css">
div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
div.custom input {
    background-color: #fff;
    border:none;
    font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>

您只需调整填充值,以便一切正确.这是 - 在我看来 - 绝对是最好的解决方案,因为在任何其他情况下,你正在使用整个输入字段.根据定义,整个输入字段是用户可以输入文本的框.

如果您可以依赖JavaScript,则可以以编程方式在输入字段周围包含此类div元素.

编辑: 使用jQuery你可以这样做:

$( 'input.custom' ).wrap( '<div class="custom"></div>' );

CSS:

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

你的HTML:

<input class="custom" ... />