CSSを使用して入力枠の下に色を付ける方法

Question

入力にフォーカスがない場合は、入力枠の下に色を付ける必要があります。これは私のhtmlコードです：

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br /> 

これは私のCSSコードです：

.numero { 
    border-bottom-color: red; 
} 

しかし、それは動作しません。誰でも助けることができますか？

Answer 1

境界はあなたの例では赤です：

.numero { 
 
    border-bottom: 1px solid #F00; 
 
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

は単にスタイル、サイズと色を追加するために速記を使用し、それが動作します。

さて、これを除去するために、それがフォーカスされたとき：質問の要素ががフォーカスされていない場合は

.numero:not(:focus) { 
 
    border-bottom: 1px solid #F00; 
 
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

は、我々はチェックし :focusと :not()機能を使用します。

Answer 2

.numero { 
    border-bottom:1px solid red; 
} 

Answer 3

使用このコード

input.numero { 
border-bottom-color:red; 
} 

Working Fiddle

Answer 4

は、いくつかの境界線スタイルを追加します。

.numero{ 
    border: 1px, solid; 
    border-bottom-color: red; 
} 

Answer 5

あなたはCSSの境界線の太さを定義する必要があります。 あなたは、あなたがこの

.numero:focus { 
    border-bottom:1px solid transparent; 
} 

が好きなことができます別の色にしたい場合は、お好みの任意の他の色に透明の値を変更することができ、この

.numero { 
    border-bottom:1px solid red; 
} 

、フォーカス上のようなことを書くことができます。任意のクエリのための

Answer 6

.numero { 
 
    border-bottom: 2px solid cyan; 
 
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

コメントしてください。すべて最高です