HTML輸入默認鉻邊框顏色覆蓋與CSS不工作

它只適用於我使用全邊框聲明。不工作：HTML輸入默認鉻邊框顏色覆蓋與CSS不工作

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">

來源

2017-04-18 kobe

爲了以這種方式使用border-color，你就需要設置寬度和樣式：

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

或者，您也可以設置border: 1px solid blue;並在那之後，覆蓋只是用border-color: red;顏色。這是有效的，但僅僅是因爲Wodth和風格已經設置好了。

來源

2017-04-18 17:28:54 Toby

如果您不提供其他邊框屬性，則瀏覽器的用戶代理樣式表中的樣式將應用於該元素。

在您的第一個示例中，如果您在開發人員工具中檢查它，它會顯示您繼承的border-style:inset。

來源

2017-04-18 17:34:17 Afsar

在編寫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>

不過，我不知道這回答了你的問題，因爲它好像兩個輸入端有一個紅色的邊框。嘗試用一些您想要獲得更多細節的例子來更好地設置您的問題的格式。

希望這會有所幫助！

來源

2017-04-18 17:52:47

HTML輸入默認鉻邊框顏色覆蓋與CSS不工作

回答

相關問題