在边距和输入元素边框之间填充颜色

Question

我为 html 表单创建了一个布局。 HTML Layout

现在，当发生错误时，我想在显示的圆形部分之间填充颜色。可能吗？如果没有，还有其他方法可以使用 JavaScript 吗？ 任何形式的帮助表示赞赏。！ 谢谢你

</div>
        <form class="form">
            <input type="text" placeholder="Name" class="textbox" /> 
            <input type='text' placeholder='Employee Number'  class='textbox' />
            <input type="email" placeholder="Email Address" class="textbox" /> 
            <input type="password" placeholder="Password" class="textbox" />
            <input type="password" placeholder="Confirm Password"  class="textbox" /> 
            <input type="button" value="Register" class="button" />
        </form>
    </div>

Answer 1

我认为您需要在表单中添加额外的元素。将输入包装在一个 div 中并添加一个箭头。像这样：

<div>
    <form class="form">
        <div class="input-wrapper">
            <div class="triangle"></div>
            <input type="text" placeholder="Name" class="textbox" /> 
        </div>
        <input type='text' placeholder='Employee Number'  class='textbox' />
        <input type="email" placeholder="Email Address" class="textbox" /> 
        <input type="password" placeholder="Password" class="textbox" />
        <input type="password" placeholder="Confirm Password"  class="textbox" /> 
        <input type="button" value="Register" class="button" />
    </form>
</div>

.triangle 应该绝对定位，.wrapper 相对定位。

http://jsfiddle.net/d492173y/2/