0

これは単純な問題だと思いますが、css クラスを動作させることができないようです。テキスト入力の周りに赤い境界線を追加しようとしています。border-color プロパティをインラインで設定すると、すべてが機能します。

 <input type="text" placeholder ="Name" style="border-color: #b94a48;" />

入力をターゲットにして周囲の div にクラスを追加すると、正しく動作します。

.error-style input {
    border-style:solid;
    border-color: #b94a48;
}

<div class="control-group error-style">
    <div class="controls">
        <input type="text" placeholder ="Name"/>
    </div>
</div>

しかし、それをクラスにして入力に追加すると、表示されません。

.error-style {
    border-style:solid;
    border-color: #b94a48;
}

<input type="text" placeholder ="Name" class="error-style" />

それが問題かどうかはわかりませんが、プロジェクトでは Twitter Bootstrap も使用しています。Bootstrap の CSS ファイルは、ここにあります。

4

6 に答える 6

2

bootstrap.cssの 1013 行目では、入力境界線の色が灰色になっています

それを解決するには、次のcssを使用します

.controls .error-style{border-style:solid;border-color: #b94a48;}

このようにして、このクラスの優先順位を高くしています。この方法は、!important を使用するよりもはるかに優れています。

問題が解決することを願っています:)

于 2012-11-21T07:57:55.973 に答える
0

あなたは以下のように書くべきですスタイルとその動作はうまくいきます...

CSS

.error-style {
      border:2px solid #b94a48;
}

HTML

<input type="text" placeholder="Name" class="error-style" />

デモ

于 2012-11-21T06:40:38.710 に答える
0

ソースをカスタム css に追加する前に、bootstrap.css ファイルにソースを追加してみてください。

<link href="bootstrap.css" rel="stylesheet" />
<link href="yourCustom.css" rel="stylesheet" />

//yourCustom.css

.error-style {
    border: 1px solid #b94a48 !important;
}

CSS レンダリングはカスケードです。最新の値が要素に適用されます。古い値が !important としてマークされている場合にのみ、新しい値は機能しません。

于 2016-06-09T09:49:51.207 に答える
0

ボーダーには幅が必要です。それがうまくいかない場合は、CSS クラスに重要度を適用してみてください。他の CSS にそれをオーバーライドしている何かがある可能性があります。

.error-style {
    border: 1px solid #b94a48 !important;
}

<input type="text" placeholder="Name" class="error-style" />
于 2012-11-21T06:04:40.397 に答える
0

使用する：

.error-style
    {
        border:2px solid #b94a48;
    }

<input type="text" placeholder ="Name" class="error-style" />

必要に応じて境界線の幅を変更できます。

于 2012-11-21T06:22:54.643 に答える