HTML入力のデフォルトのクロムボーダーカラーのオーバーライドCSSが機能しない

Question

フルボーダー宣言を使用する場合にのみ有効です。 動作していない：

border-color: red; 

作業：

border: 1px solid red; 

コード例は：

/* Styles go here */ 
 

 
.example1 { 
 
    border-color: red; /* not good */ 
 
} 
 

 
.example2 { 
 
    border: 1px solid red; /* works well */ 
 
}

<input class="example1"> 
 
    <br> 
 
    <br> 
 
    <input class="example2">

Answer 1

このようにborder-colorを使用するためには、あなたが設定する必要があります幅とスタイル：

border-color: red; 
border-style: solid; 
border-width: 15px; 

また、あなたはborder: 1px solid blue;を設定することができますし、その後、border-color: red;を使用して色だけを上書きします。これは機能しますが、wodthとスタイルが既に設定されているためです。

Answer 2

他の境界線のプロパティを指定しない場合、ブラウザのユーザーエージェントスタイルシートからのスタイルが要素に適用されます。

最初の例では、開発ツールでそれを調べると、border-style:insetが継承されています。

Answer 3

border:と書いているとき、それはすべての境界線スタイルの略語プロパティです。あなたがborder: 1px solid redを書くときだから、次のようになります。

.example2 { 
    border: 1px solid red;/* Becomes: */ 
    border-width: 1px; 
    border-style: solid; 
    border-color: red; 
} 

はしかし、あなただけの色を指定した場合、ブラウザは、他のスタイルを入力しなければならないものを何の考えを持っていないので、デフォルトのものを使用しています。

.example1 { 
    border-width: /* Uses default */ 
    border-style: /* Uses default */ 
    border-color: red; 
} 

を使用すると、入力ボックスをカスタマイズしやすくするためにいくつかの方法があります。すべての入力タイプを選択して一般的な境界線にすることができますが、クラスを使用するより特定のスタイルを指定することができます。

input[type=text] { 
 
    border: 1px solid red; 
 
} 
 

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

 
input.blue-border { 
 
    border-color: blue; 
 
}

<input type="text" class="red-border" value="I am Red"></input> 
 
<input type="text" class="blue-border" value="I am Blue"></input>

両方の入力が赤い枠を持っているかのようにそれはそうしかし、私はこれがあなたの質問に答えていることはよく分かりません。あなたがより詳細に達成したいもののいくつかの例を挙げて、あなたの質問をより良いものにするようにしてください。

希望すると便利です。