如何更改焦點上的佔位符顏色？

如何在聚焦輸入字段時更改佔位符的顏色？我用這個CSS來設置默認顏色，但如何改變它的焦點？如何更改焦點上的佔位符顏色？

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

/* Firefox < 19 */ 
:-moz-placeholder { color: #999; } 

/* Firefox > 19 */ 
::-moz-placeholder { color: #999; } 

/* Internet Explorer 10 */ 
:-ms-input-placeholder { color: #999; }

來源

2012-11-01 Davide Palmieri

試試這個，這應該工作：

input::-webkit-input-placeholder { 
    color: #999; 
} 
input:focus::-webkit-input-placeholder { 
    color: red; 
} 

/* Firefox < 19 */ 
input:-moz-placeholder { 
    color: #999; 
} 
input:focus:-moz-placeholder { 
    color: red; 
} 

/* Firefox > 19 */ 
input::-moz-placeholder { 
    color: #999; 
} 
input:focus::-moz-placeholder { 
    color: red; 
} 

/* Internet Explorer 10 */ 
input:-ms-input-placeholder { 
    color: #999; 
} 
input:focus:-ms-input-placeholder { 
    color: red; 
}

下面是一個例子：http://jsfiddle.net/XDutj/27/

來源

2012-11-01 18:47:12

爲什麼沒有：-ms-input-placeholder？ –

我沒有IE來測試上述內容，如果有人可以測試它，那將是非常棒的。 AFAIK，IE9缺少佔位符支持：http：//caniuse.com/#search=placeholder –

對我來說就像一個魅力。顯然，在IE中沒有測試過。 – Sethen

試試這個：

HTML

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }

來源

2012-11-01 18:37:52

活動不集中。 – BoltClock

是的，謝謝。 –

這並不是必要的，但我懷疑這是因爲在進一步檢查時，您的代碼會着重輸入焦點的實際值，而不是其佔位符文本。 – BoltClock

我發現這個解決方案使用jQuery：

$('input[type="text"]').each(function(){ 

    $(this).focus(function(){ 
     $(this).addClass('input-focus'); 
    }); 

    $(this).blur(function(){ 
     $(this).removeClass('input-focus'); 
    }); 

    });

這個CSS：

.input-focus::-webkit-input-placeholder { color: #f00; }  
.input-focus:-moz-placeholder { color: #f00; } 
.input-focus:-ms-input-placeholder { color: #f00; }

來源

2012-11-01 18:56:44

你不需要這個jQuery ... – BoltClock

JQuery是美麗的，但必須死亡。一切都有一個開始，結束，@DavidePalmieri – Edakos

WTH你在@BoltClock。當然，它需要jQuery ......如果有什麼需要，請使用moar jQuery！ – PeeHaa

除了Pranav回答我精與textarea的兼容性代碼：

::-webkit-input-placeholder { color: #999; } 
:-moz-placeholder { color: #999; } 

:focus::-webkit-input-placeholder { color: #ccc; } 
:focus:-moz-placeholder { color: #ccc; }

來源

2012-11-01 20:06:55

無處不在。有用。謝謝！ – Luke

從Firefox 19開始：：與佔位符屬性匹配的表單元素的-moz-placeholder僞類已被刪除，而:: - moz-placeholder僞元素已被添加。

input:focus::-moz-placeholder { color: transparent; }

來源

2013-02-23 21:23:12

使用星*選擇一切

*::-webkit-input-placeholder { color: #999; } 


*:-moz-placeholder { color: #999; } 


*::-moz-placeholder { color: #999; } 


*:-ms-input-placeholder { color: #999; }

來源

2014-10-02 00:56:49 KeepMove

-1

您可以創建一個材質設計動畫佔位符，當輸入字段集中在頂部收縮。

<div class="field"> 
<input type="text" name="user" required><br> 
<label>Enter Username</label> 
</div>

基本上，標籤字段將像一個佔位符。我們只能使用css來做到這一點。這裏http://www.voidtricks.com/create-material-design-animated-placeholder/

來源

2015-10-26 12:17:53

介紹的以下爲我工作：

input:focus::-webkit-input-placeholder 
{ 
    color: red; 
}

來源

2018-01-02 16:15:05 Bel

如何更改焦點上的佔位符顏色？

回答

相關問題