css - 如何让输入框的背景图片固定

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
}