ブートストラップの入力エラーのすべてのプロパティを使用するCSS

Question

ブートストラップのスタイリングと同じように表示されるようにしたい。このクラスは、これを行うためにブートストラップからどのように拡張する必要がありますか？基本的な青色の輝きではなく、赤い輝きのフォーカスを含む。私は.has-errorを使用しました

.ng-invalid.ng-touched.ng-dirty:not(form) { 
    // extend bootstrap style? 
} 

、私には意味がありませんクラス.has-エラーとツリーまでの要素、さらに存在する場合、これはのみ動作します。だから、これは動作します。私はそれだけで.hasエラーを持つことで動作するように取得できますか

.ng-invalid.ng-touched.ng-dirty:not(form) { 
    @extend .has-error; 
} 

HTML

<div class="form-group has-error"> 
    .. 
    <input type="text" class="form-control" required> 
</div> 

は、上位レベルの要素に入れずに入力に適用されます。

Answer 1

実際、できません。このクラスは、入力だけでなく、ラベルにも表示されます。だからこそ.has-errorを.form-groupと一緒に使用しています。

Same questionあなたのものです。

あなただけの新しいクラスを作成して、まっすぐにあなたの入力にスタイルを追加することができます。

.some-class:focus { 
    border-color: #843534; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483; 
} 
.some-class { 
    border-color: #a94442; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
}