HTML輸入提交按鈕不會改變顏色

Question

我有一個表單提交按鈕，我試圖改變顏色。這應該是非常簡單的，但我的CSS不工作，我不明白爲什麼。

的CSS：

input[type="submit"]{color: red;} 

小提琴： https://jsfiddle.net/zn7xrv60/

這是推動我堅果，任何幫助，將不勝感激。

Answer 1

的問題是在你的input文字陰影，嘗試改變它像下面然後讓你希望它是什麼樣的變化。

從

input{ 
     color: #f08200; 
     text-shadow: 0px 0px 0px #000; 
     -webkit-text-fill-color: transparent; 
    } 

要

input{ 
    color: #f08200; 
    text-shadow: 0px 0px 0px red; 
    -webkit-text-fill-color: transparent; 
} 

Answer 2

.login_content .container input[type="submit"] { 
    background: red; 
} 

Answer 3

看來有兩個問題。

第一個是Tieson T在他的評論中提到的。這是你的選擇器正在被更具體的選擇器覆蓋。這可以通過使用「不重要」的「！重要」來「固定」，但這是解決這個問題的簡單方法。

另一個問題是，提交按鈕需要您設置文字陰影。嘗試了這一點：

input[type="submit"] 
{ 
    color: red !important; 
    text-shadow: 0px 0px 0px red !important; 
} 

此CSS規則是什麼原因造成你有覆蓋文字陰影：

input{ 
    color: #f08200; 
    text-shadow: 0px 0px 0px #000; 
    -webkit-text-fill-color: transparent; 
} 

那麼另一個選擇是從這個規則中刪除的文字陰影屬性，那麼你將不需要它在第一條規則中指定。

UPDATE

作爲查瓦G，在註釋的另一原因的顏色沒有顯示是因爲-webkit文本 - 填充 - 色被設定爲透明指出。

此外，由於文本陰影沒有垂直或水平偏移，因此如果-webkit-text-fill-color不透明，陰影將不可見。

上面的輸入css規則有點「困惑」，它設置了「color」屬性，這可能意味着您希望文本具有某種顏色，但會應用隱藏在文本後面的文本陰影。其次，它使文本本身透明，所以它不再隱藏與「顏色」屬性設置不同顏色的陰影。

Answer 4

如果您檢查輸入，你會看到它採取從下面的代碼塊的顏色，它有更具體的選擇：

.login_content .container input[type="submit"]{ 
width: auto; 
padding: 10px 50px; 
border-radius: 25px; 
background: #e8e8e8; 
color: #c5c5c5; 
text-transform: uppercase; 
border: none; 
cursor: pointer; 
} 

此外，在input標籤這個規則，說文字顏色應該是透明的：

-webkit-text-fill-color: transparent; 

這是您的jsFiddle與紅色文本。

使用瀏覽器的開發工具進行這種類型的調試。

Answer 5

由於您在登錄按鈕被禁用時，你需要做這樣的事情。

.login_content .container .submit input:disabled { 
//css 
}