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

Question

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

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

我预见到以下问题:

• 我将放入输入中的文本将与图像重叠，除非我根据图像大小为输入制作一些额外的样式(如果大小不可预测，那将是一件令人头疼的事情!)

• 如果输入尺寸会改变——我将不得不自己缩放图像

• 如果我需要在左边再放一张图片，我将无法做到

做这样的事情有什么更好的做法吗？

Answer 1

the text I will put into the input will overlap the image unless I will made some extra styles for the input basing on the image size

在这种情况下，通常简单地将 padding-right 应用于元素以“清除”background-image。但是您显然需要知道图像的大概大小....

但是，您似乎有很多“假设”，这让我觉得您过度设计(或过度思考)了这个问题？除非您希望允许用户自定义界面？但即便如此，我认为这些问题可以通过不同的方式解决。

if the size is not predictable it will a real headache!

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

if the input size will change - I will have to scale the image by my self

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

if I will need to place one more image on the left I will not be able to do it

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

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

但是如果您确实有多个背景图像，您将如何处理分配事件处理程序(这似乎是您对“下拉列表”所做的事情)？您将需要一个单独的元素。