如何在输入框中修复背景图像

Question

正如您在下面的快照中看到的那样，输入框最右侧有一个小图标，当用户一直在输入框中输入，图标开始移动时，有没有办法保留它固定在当前位置？

input.fillHoverIndicator{
   background-image:url('../../images/msg_info_grey.png');
   background-repeat:no-repeat;
   padding-right:16px;
   background-position:right;
}

HTML

<input name="instance/logical.name"  class="fillHoverIndicator" id="X26" style="width:     100%; height: 19px;" onkeydown="cfKeyDown(event, 'X26');
    " onkeyup="cfKeyUp(event, 'X26');" onclick="handleOnClick(this, event);" onfocus="cbOnFocus(this, event);" onblur="cbOnBlur(this, event);
applyToSameControl(this);
  " onchange="handleOnChange(this, event);" type="text" maxLength="2147483647"     ButtonId="" dvdVar="" datachangeevent="" scripttype="comfill" getValue="function      getComboValue()
{
....
  return this.value
}" 
for="X26" idFill="9" PopupSubformWidth="333" PopupSubformEnabled="1"          PopupSubformInput="logical.name" PopupSubformFormat="popup.ci.info" tooltipHeight="209" tooltipWidth="333" tooltipUrl="popupsubform?hfformat=popup.ci.info&hfinput=logical.name&xScale=4.5&thread=1" value="1111111111111111111111111111111111111111111111"/>

Answer 1

现在将定义为根据 width，height，line-height和padding

就像这样

input.fillHoverIndicator{
width:xxx; // according to your design
height:xxx; // according to your design
line-heiht:xxx; // according to your design
padding-right:xxx; // according to your design
background:url ('../../images/msg_info_grey.png')  no-repeat right top; // according to your design
}