使用有效图像验证表单答案

【问题标题】：Validating form with valid image使用有效图像验证表单
【发布时间】：2014-03-20 12:07:52
【问题描述】：

我设计了一个 from 并尝试使用引导表单验证器对其进行验证。此处验证工作正常，但如果验证文件，则有效图标（右标记）必须位于文本框旁边，但对我而言，它位于下一行。这是图片，

这是我的标记，

<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;
}

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

【问题讨论】：

请提供小提琴。我没有看到任何带有“有效”类的标签。
我不知道如何制作小提琴。 .
访问 jsfiddle.net 并粘贴您的代码。然后点击“保存”并在此处发布链接。这将有助于我们为您提供帮助。
@DonJuwe 这是我的小提琴，jsfiddle.net/raghavendram040/rwAP7/4

标签： jquery html css validation twitter-bootstrap

【解决方案1】：

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

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;
}

【讨论】：

【解决方案2】：

嗯，有点棘手！

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

【讨论】：

非常感谢，但现在这里没有显示正确的标记。 .

【解决方案3】：

设置 display: inline-block; 用于输入框和图像。

【讨论】：

@user3377978 您还需要将其添加到文本框的样式中。
文本框没有样式
你能告诉我如何在这里为文本框添加样式吗？ .

【解决方案4】：

我发现了问题。这是 WIDTH 属性。在引导程序中它被设置为 100%，所以你必须覆盖 CSS 的这个属性：
.form-control{ display: inline-block; width:70%;}

【讨论】：