Change placeholder text color in Magento 2.1.2 search box

Question

How to change the css of a placeholder? I want to change the color of the text "Search entire store here..."

Can you please help me with this?

Answer 1

In the Magento 2 less documentation there is a file named css/docs/variables.html which specifies the placeholder variables:

Placeholder

@form-element-input-placeholder__color: #c2c2c2; //Form control placeholder color

Answer 2

#search::-webkit-input-placeholder {
    color: #909;
}

You will have to enter one for each browser. Looks like you are using the porto theme so the following code will work just place it in your custom css box in theme settings panel. Change the color to whatever you prefer.

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