border-colorは自分の色を無視します

Question

入力フィールドの境界には#644220の色を使用したいと思います。私はこのようにそれを試してみました：

HTML

<input class="my_border" type="text"> 

CSS

.my_border { 
    width:100%; 
    padding: 20px; 
    outline: none; 
    border-width: 0 0 1px 50px; 
    border-color: #644220; 
} 

https://jsfiddle.net/9dss92v6/1/

私はredまたは任意の他のHEXコードを使用すると、それがために動作します私。それはコード#644220を受け入れるだけではありません。 #644220は、既存の色で、hereと表示されています。

RGBコード（border-color: rgb(100, 66, 32);）さえ動作していません。

どうしたのですか？ MDNから

Answer 1

：

注：border-styleのデフォルト値はnoneです。つまり、 をborder-widthとborder-colorに変更した場合、このプロパティをnoneまたは を非表示に変更しない限り、 の境界線は表示されません。

ここでは、ブラウザはこれに従っていないと仮定し、デフォルトでは固体のデフォルト値borderを表示しています。 ^は、[1]

あなたはsolid

border-style: solid; 

Demo

---

^[1]はこれでさらに遊んでいた、ということが判明し、たとえば、あなたのborderためstyleを定義する必要があります私はブラウザの観点から考えると奇妙な動作です。 redやtomatoのような単語を色の名前として使用しても機能しますが、その色は、たとえばthis対thisのようなものではありません。

これについて何らかの理由があれば、このスレッドを更新します。

---

編集3：さらに

デバッグ、それはクロムが設定するデフォルト値は影のようである灰色がかった境界線があるborderためinset、すなわち、border-style: inset;、であることが判明しました。したがって、colorはレンダリングされますが、Chromeのデフォルトで設定されているinsetの境界線と混合されます。今ではあなたのスタイルシートにあるcolor宣言によって色がオーバーライドされない理由が不明ですが、バグかもしれません。

Answer 2

それのためborder-styleを追加します。

.my_border { 
    width:100%; 
    padding: 20px; 
    outline: none; 
    border-width: 0 0 1px 50px; 
    border-color: #644220; 
    border-style: solid; 
} 

Answer 3

あなたはこのように1行であなたの国境の特性を組み合わせるすることもできます。

.my_border { 
    width:100%; 
    padding: 20px; 
    outline: none; 
    border: 10px solid #644220; 
} 

あなたは常に境界線の太さを変更することができます。私は10pxにそれを作りましたので、それは見えるでしょう。