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

Question

我的网站设计包含如下所示的文本输入字段：

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

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" ... />

Answer 2

您不需要 div 元素，您可以直接为输入分配背景。

编辑：这是工作代码。我对其进行了测试，但您必须根据需要对其进行调整。据我所知，这里的一切都是必需的。

input {
    background: #FFF url(test.png) no-repeat bottom right;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0;
    text-indent:3px;
    margin:0;
    border: none;
    overflow:hidden;
}

Edit2：我不太清楚为什么我会被否决，但除非您需要比输入元素本身更大的图像，否则这种方法应该有效。在这种情况下，您应该使用额外的 div 元素。但是，如果图像与输入的大小相同，则不需要额外的标记。

Edit3：好的，在 bobince 指出一个问题之后，我离得更近了一点。这将在 IE6 和 7 中工作，并且在 FF 中很接近，但我仍在努力。

input {
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input {
    background-position:13px 16px;
}

Edit4：好的，我想这次我明白了，但它需要使用 CSS3 选择器，所以它不会被验证为 CSS 2.1。

input { 
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input { 
    background-position:13px 16px;
}
body>input:enabled { 
    background-position:9px 10px;
}

body>input 将针对除 IE6 之外的所有内容，body>input:enabled 将针对除 IE 6、7 和 8 之外的所有浏览器未禁用的任何表单元素。但是，因为 :enabled 是 CSS3 选择器，它不验证为 CSS2.1。我找不到合适的 CSS2 选择器来让我将 IE7 与其他浏览器分开。如果不验证（直到验证器切换到 CSS3）对您来说是个问题，那么我认为您唯一的选择是额外的 div 元素。

Answer 3

您是否使用过这样的背景图片进行评估：

<style type="text/css"> 
  input{ 
  background-color: #AAAAAA; 
  background-image: url('http://mysite.com/input.gif'); 
  border: 0px; 
  font-family: verdana; 
  font-size: 10px; 
  color: #0000FF; 
} 

Answer 4

我已经做过几次了。我在 div 中有背景图像，并使用 css 相应地定位输入字段。

看看我创建的使用此技术并使用代码的以下站点：http://www.ukoffer.com/（右侧时事通讯）

Answer 5

AFAIK，背景滚动问题可以在 Firefox 和朋友，或 Internet Exploder 中解决；但不能一下子让每个人都开心。

我通常会说直接为输入设置样式，但现在我认为 div 示例听起来还不错，应该解决您的背景图像滚动问题。

在这种情况下，您可以将 div 设置为 position:relative，并将输入放入其中，并使用适当的填充和宽度（如果填充为 0，则为 100% 宽度）、背景透明，并在 div 上放置图像。

Answer 6

okoman 已正确处理 CSS 方面。我可以建议使用<label> 来改进标记的语义结构吗？

<label id="for-field-name" for="field-name">
    <span class="label-title">Field Name <em class="required">*</em></span>
    <input id="field-name" name="field-name" type="text" class="text-input" />
</label>

<style type="text/css">
    label, span.label-title { display: block; }
</style>

这不仅更易于访问，而且提供了许多钩子，您可以在未来使用这些钩子进行任何类型的 DOM 操作、验证或特定于字段的样式。

编辑：如果出于某种原因您不想显示标签标题，您可以给它一个“可访问性”类，并在 CSS 中将该类设置为 display: none;。这将允许屏幕阅读器理解输入，但对普通用户隐藏。

Answer 7

在没有 JavaScript 的情况下摆脱溢出的最简单方法很简单：

1. 创建 3 个跨度，并将它们的高度设置为 图片。
2. 将图像剪切成 3 部分，确保剪切图像 左右圆形部分将在第 1 和第 3 图像上 分别。
3. 将第一个跨度的背景设置为图像 与左边框，并将其设置为不重复。
4. 设置背景 第三个跨度到带有右边框的图像并将其设置为 不重复。
5. 将输入放在中间跨度内，记住 将其高度设置为跨度的高度，并将其背景设置为 第二张图片，仅重复-x。
6. 这将确保输入 一旦输入被填充，它似乎会水平扩展。不 重叠，不需要 JS。

HTML 假设图片高度为60px，第一个和第三个span的宽度为30px，

<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}

这应该可以解决您的问题。