2013-10-27 13 views
19

Mam placeholder tekst wewnątrz pola formularza input że nie może wydawać się zmienić kolor white, to wychodzi jak grey ale tylko na firefox. Wygląda na to, że przeglądarka Chrome jest w porządku.
css - zastępczy kolor tekstu na firefox

Podczas wpisywania w polu wyświetlane są prawidłowe kolory, a jedynie początkowa placeholder, która nie odpowiada.

Każda pomoc zostanie doceniona, dziękuję.

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

podejrzewam, że to bardziej w dół do renderowania czcionek różnic niż cokolwiek innego, chociaż inne kolory wydają się trochę „wyprane”. –

Odpowiedz

64

Dodaj opacity: 1 do zastępcze Firefox.

zobacz Zaktualizowane fiddle

2

Spróbuj

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

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

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

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

Mam to, czy to nie to samo co moje css? –

+0

To jest poprawna odpowiedź. –

+0

Nie wiem, dlaczego został odrzucony. To jest właściwa odpowiedź – 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; 
}