12

我有一个网站设计，其中包含如下所示的文本输入字段：

输入字段 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) 中，当您输入的内容超过宽度时，它会执行以下操作：

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

4

7 回答 7

10

我会这样做：

<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" ... />
于 2009-02-08T23:16:06.013 回答
4

您不需要 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 元素。

于 2009-02-08T22:45:50.597 回答
1

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

<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; 
}

于 2009-02-08T22:48:50.620 回答
0

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

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

于 2009-02-08T22:44:48.087 回答
0

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

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

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

于 2009-02-13T00:02:22.240 回答
0

okoman 已经得到了正确的 CSS 方面。我可以建议使用 a<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 操作、验证或特定于字段的样式。

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

于 2009-02-13T04:24:01.783 回答
0

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

  1. 创建 3 个跨度，并将它们的高度设置为图像的高度。
  2. 将图像切成 3 部分，确保将图像切割成左右圆形部分分别位于第 1 和第 3 图像上。
  3. 将第一个跨度的背景设置为具有左边框的图像，并将其设置为不重复。
  4. 将第三个 span 的背景设置为具有右边框的图像，并将其设置为 no-repeat。
  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;}

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

于 2011-12-23T19:26:49.457 回答