更改输入框：带有 CSS/HTML 的输入区域答案

【问题标题】：Change input box: input area with CSS/HTML更改输入框：带有 CSS/HTML 的输入区域
【发布时间】：2012-11-18 03:12:07
【问题描述】：

所以，我有一个框，我想用作我的搜索框/输入框。虽然当我在上面打字时，我可以在整个图像上打字。

我想要做的是只能在图像的空白处输入？我会添加填充吗？

这是我的 CSS：

input.searchbox {
background-color: #fff;
background:url(search.png) no-repeat;
width:250px;
height:41px;
border:none;
font-size:20px;
}

这是我的 HTML：

<input type="text" class="searchbox" size="20" value="{Q}">

另外，如何更改框中的文本大小？

【问题讨论】：

【解决方案1】：

您的图片是背景图片。所以如果有必要，文本会覆盖它。

尝试放置一个单独的图像，在该图像和文本之间留出一些边距。

【讨论】：

所以只需添加一张可能是搜索框背景的图片，然后将空白图片放在另一张图片的顶部？
不知道你的图像是什么样子的，这听起来很对。据我所知，背景图像不与其他元素交互。它就像一个背景颜色，它不会为您的文本/元素移开
所以，这里是愚蠢的问题。我如何将输入的“图像”添加到背景图像上？如果这听起来很愚蠢，我很抱歉，我还不是很流利地使用 CSS。我只想像你说的那样添加背景图像，但是我如何用我的输入框将它“排列”在该背景图像的顶部？

【解决方案2】：

根据您的图像（文本位置，文本是什么），我使用表格来保存输入（带有图像），然后在单独的列中具有旁边带有匹配图像的提交按钮。

恕我直言，这实际上取决于您使用的图像以及您如何尝试将其与输入字段匹配。

【讨论】：