html - 表单的 CSS 气泡错误框

Question

我想为如下所示的表单创建一个错误框。

我已经为输入框设置了主题，并且正在使用 jQuery 验证来显示错误。但是我无法正确处理该错误框。我想我需要将它与三个标签放在一起，但我不知道要使用什么标签(jQuery 验证使用 label 标签来显示错误)。我当前的错误代码是:

<label for="email">
  <span>Email:</span>
  <input type="text" id="email" name="email" class="error">
  <label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>

我必须让这个 IE7 兼容。

我做了以下更改:

  <div class="dataline">
  <div class="label">Label:</div>
  <div class="field"><input type="text" id="name" name="name" /></div>
  <div class="arrow"></div>
  <label class="error">Error text</label>
  <div class="ender"></div>
  </div>

我将箭头设置为 arrow 类的图像，所以现在它看起来很完美。基本上我使用了 4 个左浮动 block 元素(标签、输入、箭头和气泡体)。现在我只有两个问题:即使没有错误也会显示箭头。当 label 不在它后面时如何隐藏它？我的另一个问题是容器 div 是 800px 宽，如果错误文本很长，它会换行到下一行。我该如何避免？

我的 CSS 是:

    div.dataline {
    margin: 10px 0 0 0;
    white-space: nowrap;
    width: 3000px;
    owerflow: visible;
    height: 60px;
}

div.field {
    float: left;
}

div.label {
    float: left;
    width: 120px;
    margin: 20px 0 0 0;
}

div.arrow {
    background-image: url('gfx/redarrow.png');    
    margin: 7px 0 0 10px;
    background-repeat: no-repeat;
    width: 20px;
    height: 45px;
    float: left;
}

div.ender {
    background-image: url('gfx/bubbleend.png');    
    margin: 7px 0 0 0px;
    background-repeat: no-repeat;
    width: 3px;
    height: 45px;
    float: left;
}

label.error {    
    height: 27px;
    background-image: url('gfx/bubblemiddle.png');
    float: left;    
    padding: 9px;
    margin: 7px 0 0 0;
}

Answer 1

以下 fiddle 是您实现的良好开端:

http://jsbin.com/aReQUgay/1/edit

#email.error
{
    border-color: red;
}

#email.error + label
{
    background-color: red;
}