jquery - 验证弄乱了输入组 CSS

Question

我正在使用 PureCSS 和 jQuery Validate 插件。

我有如下代码：

<form id='new-doctor' class='pure-form'>
   <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Doctor Name" required minlength="2">
    <textarea class="pure-input-1-2" placeholder="Credentials"></textarea>
   </fieldset>
</form>

http://jsfiddle.net/jGdK9/

如果没有验证，那么输入组看起来很棒（两个输入在中间连接），但是一旦验证发生（要尝试一下，在名称输入中键入少于两个字符并在输入之外单击) 该组被分开并且看起来不再好。

Answer 1

问题是因为选择器的规则（在 pure-min.css 中）form .pure-group input:first-child将top这个输入的 设置为-1px。在此输入之前附加验证标签后，此选择器将不再与您的输入匹配，因此该top属性的假定值为1px，由另一个规则 ( .pure-form .pure-group input) 定义。

你可以通过一些猴子补丁来解决这个问题：

.pure-form .pure-group .error + input{
  top: 1px;
}

Answer 2

使用这个 css 片段来解决这个问题

.pure-form .pure-group input {
    top: 0;
}

这是更新的jsfiddle