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

问题描述

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

I have a website design that includes text input fields that look like this:

我想知道创建此输入字段的最佳解决方案是什么。

I'm wondering what the best solution for creating this input field is.

我有一个想法是总是有一个div的背景图像和输入字段和指定的宽度以像素为单位禁用所有输入的输入，如：

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 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?

-

试用：

我尝试了以下操作：

<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）

but in IE (6 & 7) it does the following when you type more than the width:

推荐答案

我这样做：

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

如果你可以依赖于JavaScript，你可以通过程序包装这样的div-Elements到你的输入框。

If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.

strong> Edit>
使用jQuery，您可以这样做：

With jQuery you could do it this way:

$( '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" ... />

这篇关于你将使用什么HTML / CSS来创建带有背景的文本输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！