您将使用什么 HTML/CSS 来创建带有背景的文本输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/526548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What HTML/CSS would you use to create a text input with a background?
提问by Darryl Hein
I have a website design that includes text input fields that look like this:
我有一个网站设计，其中包含如下所示的文本输入字段：
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
输入栏 http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
我想知道创建此输入字段的最佳解决方案是什么。
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
我的一个想法是始终在输入周围有一个带有背景图像的 div，并且在输入字段上禁用所有边框并以像素为单位指定宽度，例如：
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
我试图阻止他们使用这种格式，但他们不会气馁，所以看起来我将不得不这样做。
Is this best or is there another way?
这是最好的还是有其他方法？
--
——
Trial:
审判：
I tried the following:
我尝试了以下方法：
<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" />
but in IE (6 & 7) it does the following when you type more than the width:
但在 IE (6 & 7) 中，当您输入的宽度超过宽度时，它会执行以下操作：
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
采纳答案by okoman
I'd do it this way:
我会这样做：
<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>
You just have to adjust the padding values so everything fits correctly. It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
您只需要调整填充值，以便一切都正确。在我看来，这绝对是最好的解决方案，因为在任何其他情况下，您都在使用整个输入字段。根据定义，整个输入字段是一个用户可以输入文本的框。
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
如果您可以依赖 JavaScript，您可以以编程方式将这些 div-Elements 包裹在您的输入字段周围。
Edit:With jQuery you could do it this way:
编辑：使用 jQuery，你可以这样做：
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
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;
}
And your HTML:
还有你的 HTML：
<input class="custom" ... />
回答by VirtuosiMedia
You don't need the div element, you can assign a background to the input directly.
您不需要 div 元素，您可以直接为输入分配背景。
Edit:Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
编辑：这是工作代码。我测试了它，但你必须根据你的需要调整它。据我所知，这里的一切都是需要的。
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:I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit2：我不太确定为什么我被否决了，但是除非您需要一个比输入元素本身更大的图像，否则这种方法应该可以工作。在这种情况下，您应该使用额外的 div 元素。但是，如果图像与输入的大小相同，则不需要额外的标记。
Edit3:Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
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: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
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 will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
body>input 将针对除 IE6 之外的所有内容，body>input:enabled 将针对除 IE 6、7 和 8 之外的所有浏览器未禁用的任何表单元素。但是，因为 :enabled 是一个 CSS3 选择器，所以它不会't 验证为 CSS2.1。我找不到合适的 CSS2 选择器来让我将 IE7 与其他浏览器分开。如果不验证（直到验证器切换到 CSS3）对您来说是个问题，那么我认为您唯一的选择是额外的 div 元素。
回答by Rutesh Makhijani
Have you evaluated using background image like this:
您是否使用过这样的背景图像进行评估：
<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;
}
回答by Keith Donegan
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
我已经这样做了几次。我在 div 中有背景图像，并使用 css 相应地定位输入字段。
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/(Right hand side Newsletter)
看一看我创建的使用此技术并使用代码的以下站点：http: //www.ukoffer.com/（右侧时事通讯）
回答by Keith Donegan
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
AFAIK，背景滚动问题可以在Firefox和朋友，或Internet Exploder中解决；但不能一下子让每个人都开心。
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
我通常会说直接设置输入的样式，但现在我认为 div 示例听起来还不错，应该处理您的背景图像滚动问题。
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
在这种情况下，您可以将一个 div 设置为 position:relative，并将输入放入其中并使用适当的填充和宽度（如果填充为 0，则为 100% 宽度），背景透明，然后在 div 上放置一个图像。
回答by Mark Hurd
okoman has gotten the CSS aspect correct. May I suggest using a <label>to improve the semantic structure of the markup?
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>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
这不仅更易于访问，而且还提供了许多钩子，您可以在将来用于任何类型的 DOM 操作、验证或特定于字段的样式。
Edit:If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none;in the CSS. This will allow screen readers to understand the input but hide it from regular users.
编辑：如果由于某种原因不想显示标签标题，可以给它一个“可访问性”类并将该类设置为display: none;在 CSS 中。这将允许屏幕阅读器理解输入但对普通用户隐藏它。
回答by Kneel-Before-ZOD
The easiest way to get rid of the overflow without JavaScript is simple:
在没有 JavaScript 的情况下摆脱溢出的最简单方法很简单：
- Create a 3 spans, and set their heights to the height of the image.
- Cut the image into 3 parts, ensuring you cut the image such that the left and right round parts will be on the 1st and 3rd images respectively.
- Set the background of the 1st span to the image with the left border, and set it to no-repeat.
- Set the background of the third span to the image with the right border and set it to no-repeat.
- Put the input inside the middle span, remembering to set its height to the height of the spans, and its background to the 2nd image, and repeat-x only.
- That will ensure that the input will seem to expand horizontally once the input is being filled. No overlapping, and no JS needed.
- 创建 3 个跨度，并将它们的高度设置为图像的高度。
- 将图像切成 3 部分，确保将图像剪切成左右圆形部分分别位于第 1 个和第 3 个图像上。
- 将第一个跨度的背景设置为带有左边框的图像，并将其设置为不重复。
- 将第三个跨度的背景设置为带有右边框的图像，并将其设置为不重复。
- 将输入放在中间跨度内，记住将其高度设置为跨度的高度，将其背景设置为第二个图像，并且仅重复-x。
- 这将确保一旦输入被填充，输入似乎会水平扩展。没有重叠，也不需要JS。
HTML Assuming the image height is 60px, the width of the first and third span is 30px,
HTML 假设图片高度为60px，第一个和第三个span的宽度为30px，
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
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;}
That should resolve your issue.
那应该可以解决您的问题。
