2013-10-27 25 views
19

佔位符文本顏色我有一個input表單字段,我似乎改變顏色whiteplaceholder文本,它出來作爲grey但只能在Firefox瀏覽器。 Chrome瀏覽器似乎很好。

CSS - 在Firefox

當您在字段中輸入正確的顏色時,會顯示正確的顏色,它只是最初的placeholder,它沒有響應。

任何幫助將不勝感激,謝謝。

CSS:

input#myinput::-webkit-input-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput::-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput:-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
} 
input#myinput::-ms-input-placeholder { 
    color:#FFF; background-color:#CCC; 
} /* IE10+ */ 

input[type="text"]{ 
    width:170px; height:16px; padding:12px 5px; border:none; 
    color:#FFF; font:14px/14px 'Arial', Helvetica, sans-serif; 
    text-align:center; background-color:#CCC; 
} 

Heres my fiddle

+0

我懷疑這是越往下字體渲染比什麼都重要的差異,儘管其他顏色似乎有點「褪色」。 –

回答

64

添加opacity: 1到Firefox的佔位符。

查看更新fiddle

2

嘗試

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

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

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

:-ms-input-placeholder { 
    color: #fff; 
} 
+0

我有,不是我的CSS一樣嗎? –

+0

這是一個正確的答案。 –

+0

我不知道爲什麼它被拒絕。這是正確的答案 – Mohit

1
//PLACEHOLDER EXAMPLE 

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #666; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #666; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #666; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #666; 
}