如何设置一个固定的宽度到文本框不受不同填充值左边的影响？

Question

我想将图像放在一个文本框中，该文本框与一些填充左边的值保持对齐。为此我在CSS中使用background-image和background-position属性。 放置哪个图像由第三个值决定，图像宽度不同。

我的第二个要求是文本框中的文本应该在图像以4px的间隙结束后显示。 由于图像宽度不同，文本框宽度也会发生变化。我希望将它保持在固定的宽度。

我尝试使用text-indent属性而不是padding-left放置：

text-indent : 40px;

text-indent帮助我保持宽度固定，但是当我在文本框中单击时，它会在文本框的开头显示光标（在2px处）。

我该怎么办？我应该使用哪些CSS属性？

Answer 1

我不完全确定你的要求，但是我可以收集它听起来像你需要CSS宽度属性？

.myInput
{
   background: white url(images/smiley.png) center left no-repeat;
   padding-left:18px;
   width: 120px; /* Fixed outside bounds width of the text input*/
}