Question

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

Input Field 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＆amp; 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元素。但是，如果图像与输入的大小相同，则不需要额外的标记。

编辑3：好的，在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＆gt;输入将定位除IE6之外的所有内容，正文＆gt;输入：启用将定位除IE 6,7和＆amp;之外的所有浏览器均未禁用的任何表单元素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的情况下摆脱溢出的最简单方法很简单：

创建3个跨度，并将其高度设置为高度图像。
将图像分成3个部分，确保切割图像左右圆形部分将位于第1和第3张图像上分别
将第一个跨度的背景设置为图像使用左边框，并将其设置为不重复。
设置背景第三个跨度到具有右边框的图像并将其设置为不重复。
将输入放在中间跨度内，记住将其高度设置为跨度的高度，并将其背景设置为第二张图片，仅限repeat-x。
那将确保输入输入填充后，似乎会水平扩展。没有重叠，不需要JS。

HTML 假设图像高度为60px，则第一个和第三个跨度的宽度为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;}

这应解决您的问题。

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

7 个答案: