我有一个网站设计,包括如下所示的文本输入字段：
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
我想知道创建此输入字段的最佳解决方案是.
我有一个想法是使用背景图像在输入周围总是有一个div,并且在输入字段上禁用所有边框,并以像素为单位指定宽度,例如：
<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)中,当您输入的宽度超过以下时,它会执行以下操作：
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
解决方法
我这样做：
<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" ... />
