How to change the Placeholder Text color

Hi,

Thank you for your kind words!

The placeholder color should follow the color of the input, but you can force a color of your choice via these custom CSS:

input.orig::placeholder {
    color: red !important;
}

That should do the trick ??

Best,
Ernest M.

Hi, Thanks for your response.

I have used the above code but it didn’t work.

The Custom CSS I am using are mentioned below that might help you to rectify the issue.

/*search box background color change*/
.probox {background-color: #C0C0C0 !important; background-image: none !important;}

/*search text font color, size, bold*/
#ajaxsearchlite1 .probox .proinput input, div.asl_w .probox .proinput input {color: #000 !important; font-weight: bold; font-size: 15px !important;}

/* Search Result titles Color, size, bold */
.asl_r a.asl_res_url {
color: #55a098 !important;
font-weight: bold !important;
font-size: 15px !important;}

/* Show more color */
p.showmore a {
color: #55a098 !important;
}

/*placeholder color change*/
input.orig::placeholder {
color: red !important;
}

That is interesting, I suspect some other custom CSS might be conflicting. May I take a look at this somewhere?

Thank you!

Code I am using now and the screenshot attached

/*search text font color, size, bold*/
#ajaxsearchlite1 .probox .proinput input, div.asl_w .probox .proinput input {color: #000 !important; font-weight: bold; font-size: 15px !important;}

/* Search Result titles Color, size, bold */
.asl_r a.asl_res_url {
color: #55a098 !important;
font-weight: bold !important;
font-size: 15px !important;}

/* Show more color */
p.showmore a {
color: #55a098 !important;
}

/*placeholder color change*/
input.orig::placeholder {
color: #55a098 !important;
}

Search Box Image Result

Thank you, but I need to see it live, to see if there is any other CSS conflicting. Can you please share a link to a page where this is visible?

Thank you!

Test Page

Use this link to check it live.

Thanks!

Thank you!

This will do the trick:

div.asl_w .probox input.orig::placeholder {
    color: #55a098 !important;
}