CODEWITHSUNDEEP
css
user2533660
user2533660

Reputation: 151

How to change the color of placeholder text

I'm using a plugin for chrome called Stylish to change the css of this website. I've successfully changed most of it, but there is this one part I can't change.

Placeholder Color Change: The worst of these is the color of the placeholder text in the search bar ("Search Quizlet). I wrote some css (shown below), in an attempt to change it. While it changed the placeholder text in another input field (you won't be able to see it unless you are logged in), it did not change the color of the correct one.

  ::-webkit-input-placeholder,
input::-webkit-input-placeholder,
form input::-webkit-input-placeholder,
input:placeholder-shown,
::placeholder,
#header .search .submit{
    color: #999;
}

Above are all my attempts at finding what tag is responsible for changing the placeholder's text color.

Upvotes: 1

Views: 3901

Answers (3)

Husain Ahmmed
Husain Ahmmed

Reputation: 351

Here is a solution from CSS-Tricks 

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

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

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

:-ms-input-placeholder {  
   color: red;  
}

Here is two useful link to know more about placeholder and placeholder text style

Style Placeholder Text

:placeholder-shown

Upvotes: 0

Michael
Michael

Reputation: 171

What you want to use/change is the following:

input, .actual-edit-overlay {
    -webkit-text-fill-color: #fff !important;
}

Upvotes: 6

Stuart
Stuart

Reputation: 6785

You're nearly there but not quite. You'll need vendor prefixes for all the browsers. 

input::-webkit-input-placeholder,
input::-moz-placeholder, 
input:-ms-input-placeholder  
{  
    color:#999 !important;  
}

Upvotes: 0

Related Questions