佔位符焦點不起作用

佔位符顏色爲紅色。默認文本字段值是＃444。我想要什麼，如果我點擊文本字段，佔位符顏色會改變。但是默認顏色不應該改變。有可能嗎？佔位符焦點不起作用

請看我的小提琴。

CSS: 
.add_product input[type=text]{ color:#444;} 

::-webkit-input-placeholder { 
    color: #D72D2E; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: #D72D2E; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #D72D2E; 
} 

:-ms-input-placeholder { 
    color: #D72D2E; 
} 




::-webkit-input-placeholder:focus { 
    color: #F3797A; 
} 

:-moz-placeholder:focus { /* Firefox 18- */ 
    color: #F3797A; 
} 

::-moz-placeholder:focus { /* Firefox 19+ */ 
    color: #F3797A; 
} 

:-ms-input-placeholder:focus { 
    color: #F3797A; 
}

來源

2014-07-24 Akash

佔位符顏色應該改變？但是當你關注字段時，佔位符將會消失。'：focus'位於'input'而不是'placeholder'上。 – putvande

@putvande其實不是：它只會消失，如果你開始輸入... – webeno

這取決於瀏覽器。在IE中它消失了。 – putvande

移動:focus前::placeholder：

:focus::-webkit-input-placeholder //etc

http://jsfiddle.net/ca35A/1/

來源

2014-07-24 12:13:59 pawel

聚焦輸入欄時，它看起來像改變佔位符。心不是？ –

是的，它意味着在原始代碼中「佔位符在具有僞類：焦點的元素內」而不是「佔位符」。 – pawel

謝謝，它的工作很好。非常感謝。 – Akash

要設置在placeholder的:focus但它應該是在input：

:focus::-webkit-input-placeholder { 
    color: #F3797A; 
} 

:focus:-moz-placeholder { /* Firefox 18- */ 
    color: #F3797A; 
} 

:focus::-moz-placeholder { /* Firefox 19+ */ 
    color: #F3797A; 
} 

:focus:-ms-input-placeholder { 
    color: #F3797A; 
}

Fiddle

請注意，並非所有的瀏覽器支持這一點。例如，當您專注於input時，IE隱藏了placeholder。

來源

2014-07-24 12:13:49 putvande

佔位符焦點不起作用

回答

相關問題