Question

我想在文本输入的右侧放置一个图标。我将使用具有以下CSS设置的背景图像：

input[type=text].dropdown {
  bachground-image: /images/down.png
  background-repeat: no-repeat;
  background-position: right center;
}

我预见到以下问题：

我将放入输入的文本将与图像重叠，除非我根据图像大小为输入创建一些额外的样式（如果大小不可预测，那将是一个真正的头痛！）
如果输入尺寸会改变 - 我将不得不自己缩放图像
如果我需要在左侧再放一张图像，我将无法进行此操作

有没有更好的做法来做这样的事情？

Answer 1

我将放入输入的文本将与图像重叠，除非我根据图像大小为输入制作一些额外的样式

在这种情况下，只需将padding-right应用于元素就可以“清除”background-image。但你显然需要知道图像的大致尺寸....

然而，你似乎有很多“假设”，这让我觉得你过度工程（或过度思考）这个问题？除非您想要允许用户自定义界面？但即便如此，我认为这些可以用不同的方式解决。

如果大小无法预测，那真的很头疼！

为什么不可预测？这样的事情通常会在设计阶段得到解决，并且非常可预测。如果您允许用户提交图像，那么您应该在提交时调整图像大小。

如果输入大小会改变 - 我将不得不自己缩放图像

这实际上取决于输入大小的变化。如果元素只是变长，那么你可能不需要改变任何东西。但同样，这通常是在设计阶段解决的问题。

如果我需要在左侧再放一张图片我将无法做到这一点

为什么需要同时在左侧和右侧放置图像？我可以想象如果你需要考虑从右到左的文本，那么你可能需要交换图像的位置，但通常不能同时交换它们？

但是，您可以使用CSS3实际使用多个背景图像，只要您不需要支持IE8及更早版本。参考：http://caniuse.com/multibackgrounds

但是如果你确实有多个背景图片，那么你将如何处理分配事件处理程序（这似乎与你在“下拉列表”中所做的一样）？你需要一个单独的元素。

Answer 2

w3d提出了非常好的担忧。你想到的很多“如果”似乎并不常见。如果它们确实发生了，因为你正在设置一个允许它或需要它的环境（在我看到实际环境之前很难说）那么你应该做的是使用动态代码进行调整。

以下是我用最基本的方式做你正在做的事情的例子

JSFiddle Demo

现在，到目前为止，覆盖你的6可能会插入另一个图像，等等。你需要以下逻辑：

假设用户是输入您想要彼此相邻堆叠的图像的用户。将图像发布到数据库
使用条件语句动态回显它，该条件语句表示如果图像！= 0，则可以根据需要回显

下面的每个实例都将动态完成，如上所述

HTML

<div class="form-group">
<label for="txtDate">LABEL</label>
    <input type="text" class="txtcalendar" id="txtDate" placeholder="E.g. mm/dd/yyyy" />
    <span>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
       <img class="calendar"src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkW2p-FHKOHJhdBUX1to1VfGMWn18eGlZgDRU5YHLrzw8rkDgB" alt=""/>
    </span>
</div>

在文本输入字段的右侧放置图标的最佳做法是什么

2 个答案: