0

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?

example

1
#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;
}
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.