使用有效图像验证表单

Question

我设计了一个from并尝试使用bootstrap form validater验证它。这里验证工作正常，但是如果验证了文件，则有效图标（右侧标记）必须位于文本框的旁边，但对我来说它是下一行。这是图像，

这是我的标记，

<div class="form-group control-group">
<label for="uln" class="control-label col-xs-4">Teacher Id:</label>
    <div class="col-xs-8">
        <div class="col-lg-8 controls">
          <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id">
        </div>
</div>

</div>

我有css，

label.valid {
width: 24px;
height: 24px;
background: url(assets/img/valid.png) center center no-repeat;
display: inline-block;

text-indent: -9999px;
}

请帮助我，我希望文本框旁边有正确的标记。

Answer 1

为什么不在span之后添加input？

DEMO

HTML：

<div class="form-group control-group">
    <label for="uln" class="control-label col-xs-4  ">Teacher Id:</label>
    <div class="col-xs-8">
        <div class="col-lg-8 controls">
            <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id">
            <span class="valid"></span>
        </div>
    </div>
</div>

CSS：

.valid {
    width: 24px;
    height: 24px;
    background: url(http://images.videolan.org/images/features/tick.png) center center no-repeat;
    display: inline-block;
    text-indent: -9999px;
}

Answer 2

为输入框和图片设置 display：inline-block; 。

Answer 3

嗯有点棘手!!

CSS代码：

label.valid {
    width: 24px;
    height: 24px;
    background: url(http://fdata.over-blog.net/99/00/00/05/img/new/portal2-3/body/valid.png) right center no-repeat;
    text-indent: -9999px;    
    right:-5px;
    top:0;
    position:absolute;
}

正在使用 DEMO

Answer 4

我发现了问题。它是WIDTH属性。在bootstrap中它设置为100％，因此你必须覆盖CSS的这个属性：
.form-control{ display: inline-block; width:70%;}