加载指示器自动完成

Question

我已在我的Web应用程序中为文本框实现了自动完成功能。 这里的问题是我的文本框宽度为100px。加载指示符是当用户开始键入文本框时添加到文本框的背景CSS。

我希望加载指示符位于页面的最右侧。

但由于指示被附加到文本框（宽度= 100px），所以加载指示符保留在其中。

请让我知道如何将加载指示器放在最右边。

Answer 1

Demo Jsfiddle

一种选择是包裹元素的包装div然后使用:after伪选择在您的负载指示添加（简单的文本image在演示中，用''替换此，沿着用background-image与height和width）。这两个例子说明了在正确的输入内或者在整个页面右侧的正确输入。

HTML

<div class='wrapper'><input type='text' /></div> 
<br> 
<div class='wrapper'><input type='text' /></div> 

CSS

html, body{ 
    position:relative; 
    width:100%; 
    padding:0; 
    margin:0; 
} 
input{ 
    width:100px; 
} 
.wrapper{ 
    display:inline-block; 
} 
.wrapper:first-child{ 
    position:relative; 
} 
.wrapper:after{ 
    position:absolute; 
    content:'Image'; 
    right:0; 
}