1

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/

検証がない場合、入力グループは見栄えがよくなります (2 つの入力が途中で接続されます) が、検証が行われるとすぐに (試してみるには、名前入力に 2 文字未満を入力し、入力の外側をクリックします)。 ）グループは分離され、見栄えが悪くなります。

4

2 に答える 2

3

問題は、この入力の をform .pure-group input:first-childに設定するセレクターのルール (pure-min.css 内) が原因です。この入力の前に検証ラベルを追加すると、このセレクターは入力と一致しなくなるため、プロパティの想定値は、別のルール ( ) によって定義されます。top-1pxtop1px.pure-form .pure-group input

この問題は、モンキー パッチを適用することで解決できます。

.pure-form .pure-group .error + input{
  top: 1px;
}
于 2014-07-09T01:18:34.913 に答える
0

このCSSスニペットを使用してこれを修正してください

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

これが更新されたjsfiddleです

于 2014-07-09T01:16:12.087 に答える