0

Twitter Bootstrapを使用して、以下のようなフォーム要素を作成しています。通常、「submit」は「controls」コンテナの外側に配置する必要がありますが、私のレイアウトでは、次のように内側に配置する必要があります。

<div class="control-group">
    <div class="controls">
        <input type="text" name="email" value="" id="email" class="input-large email" placeholder="email" required="">  
        <input type="submit" value="submit" name="submit" id="submit" class="btn btn-success">
    </div>
</div>

'error'クラスをに追加すると、1つを除いてすべて正常に動作します

<div class="control-group error">

「送信」ボタンも、私が望まないスタイルになります。ブートストラップCSSを変更して：not（[type ='submit']）を含めると、動作によってこのスタイル設定を防ぐことができます。

.control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
border-color: #B94A48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

と

.control-group.error .checkbox, .control-group.error .radio, .control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
color: #B94A48;
}

しかし、要素が特定のタイプである場合、jqueryを使用してこのスタイルが完全に下がるのを防ぐ別の方法をどうにかして見つけることができるかどうか疑問に思っています...

そうでなければ私は調べています

  1. 特定のcssクラスを無視するように特定の要素に指示する方法を見つける
  2. エラークラスを追加する前に、要素のすべてのcss適用属性を使用して正確な複製を作成し、その後に置き換えます
4

2 に答える 2

1

私が通常行っていることは、グローバルスタイルシートにクラスを追加して、フィールドのエラークラスをオーバーライドすることです。これを行うには、CSSに特異性を追加します。完全なクロスブラウザコンプライアンスのための最も簡単な（おそらく正しくない）方法のようです。

于 2012-09-08T04:24:41.110 に答える
1

スパンをネストし、それに応じてスタイルを設定できます。

<div class="control-group">
  <div class="controls">
    <span class="error">
      <input type="text" name="email" value="" id="email" class="input-large email" placeholder="email" required="">  
    </span>
    <input type="submit" value="submit" name="submit" id="submit" class="btn btn-success">
</div>

これにより、エラーがそのスパンのみに制限されます。

于 2012-09-08T04:27:38.177 に答える