关于input框背景图和文字重叠的解决办法

input框内放了图标后可能会与文字重叠,设定过图标的位置,大小或文字的text-overflow,text-align都不好使,都会造成如图的重叠情况:

关于input框背景图和文字重叠的解决办法

后来歪打正着给input添加padding-left = 固定值,发现问题完美解决:

关于input框背景图和文字重叠的解决办法

添加padding-left固定值后图标位置不变,而不会因为文字过多而和图标重叠。

 

再添加:padding要和text-align结合使用,如text-align = left 的话设定padding-left的值即可,相反text-align = right的话设定padding-right即可。目前发现好像对于text-align没有用.. 直接设定left或right然后设定padding调整文字位置即可。