如何將單獨的FOCUS樣式應用於兩個輸入字段

但我想爲不同的輸入字段使用不同的樣式，但似乎我只能在CSS中設置一個輸入樣式焦點。

我目前使用此代碼形式輸入的焦點：

input[type=text]:focus, textarea:focus , input[type=password]:focus{ 
    box-shadow: 0 0 5px rgba(229, 47, 22, 1); 
    padding: 8px 3px 8px 58px; 
    margin: 5px 1px 10px 0px; 
    border: 1px solid rgba(229, 47, 22, 1); 
}

現在，當我想爲忽略這個樣式的另一個輸入字段，我想加入這個在做該輸入字段的類別：

.search 
{ 
    box-shadow: 0 0 2px rgba(211, 211, 211, 211); !important; 
}

瀏覽器如果忽略此重疊並仍顯示紅色陰影。

我確信有一個出路，但似乎找不到正確的方法來做到這一點。歡迎任何幫助或建議:)

來源

2014-10-19 ssdesign

刪除';'前'important' – Parody 2014-10-19 09:44:18

要正確重寫樣式設置，使用更具體的選擇，例如

input[type=text]:focus, textarea:focus , input[type=password]:focus{ 
 
    box-shadow: 0 0 5px rgba(229, 47, 22, 1); 
 
    padding: 8px 3px 8px 58px; 
 
    margin: 5px 1px 10px 0px; 
 
    border: 1px solid rgba(229, 47, 22, 1); 
 
} 
 

 
input[type=text].search:focus 
 
{ 
 
    box-shadow: 0 0 2px rgba(211, 211, 211, 211); 
 
}

<input type=text> 
 
<input type=text class=search>

來源

2014-10-19 10:32:33

完美，謝謝！那就是我正在尋找的:) – ssdesign 2014-10-19 20:47:41

！重要的是不能後，所以..

.search 
{ 
    box-shadow: 0 0 2px rgba(211, 211, 211, 211) !important; 
}

而那就是它。

但更好的方法是寧願用ID＃搜尋，也沒有必要！重要

來源

2014-10-19 09:37:38

如何將單獨的FOCUS樣式應用於兩個輸入字段

回答

相關問題