邊框顏色忽略我的顏色

我想使用顏色#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或任何其他十六進制代碼，它會爲工作我。它不僅會接受代碼#644220。 #644220是現有的顏色，如您所見here。

甚至沒有RGB代碼（border-color: rgb(100, 66, 32);）正在工作。

它有什麼問題？

來源

2016-07-08 Reza

它的作品，但它的'1px'你看不到好 –

你設置頂部和右側的寬度爲0.'邊界寬度：0 0 1px 50px;' –

從MDN：

注：border-style默認值是none。這意味着如果您更改了border-width和border-color，您將不會看到邊框，除非您將此屬性更改爲非none或隱藏的以外的其他屬性。

現在我假設瀏覽器沒有遵循這一點，它們默認顯示一些固定的默認border。 ^[1]

您需要定義一個style您border例如solid

border-style: solid;

Demo

^[1]與此進一步發揮，事實證明，從瀏覽器的角度來看，這是奇怪的行爲。如果我使用類似red或tomato這樣的字作爲顏色名稱，但它仍然有效，但顏色不是我們所期望的顏色，例如this與this。

我會更新這個線程，如果我有這個任何可靠的推理。

編輯3：

進一步調試，事實證明，默認值爲Chrome會將是inset爲border，即，border-style: inset;，其中有灰色邊框它就像一個影子。因此，您的color會進行渲染，但會與Chrome默認設置的inset邊框混合。現在我不確定爲什麼顏色不會被樣式表中的color聲明覆蓋，可能是一個錯誤。

來源

2016-07-08 07:55:47

仍然想知道爲什麼它可以用於任何其他顏色。但是，謝謝，這真的解決了問題！ – Reza

@Reza好吧不是，閱讀演示鏈接後的細節，我仍然在思考爲什麼它以奇怪的方式工作。 –

@Reza：這不適用於其他顏色。嘗試使用'border-width：5px 10px 20px 50px;'來顯示更多細節。 – WorkWe

爲它添加border-style：

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

來源

2016-07-08 07:57:42 WorkWe

您可能希望在這樣一行邊框的屬性結合在一起：

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

您可以隨時更改邊框的厚度。我在10px中製作了它，這樣它就可以看到。

來源

2016-07-08 07:57:43 rhavendc

邊框顏色忽略我的顏色

回答

相關問題