change search input field color

  • 12 January 2019
  • 6 replies
  • 82 views

 I have edited the search bar placeholder text within our portal but also want to change the font color. Trying to change the search placeholder color using the below CSS targets, yet the color is unchanged....

What should be the correct ones to change the placeholder text color?

 

.ui-autocomplete, .ui-state-hover, .ui-state-active, #support-search-input, .ui-autocomplete-input {color:#000 !important;}

.ui-autocomplete-input::placeholder {color:#000 !important;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:#000 !important;
}
::-moz-placeholder { /* Firefox 19+ */
color:#000 !important;
}
:-ms-input-placeholder { /* IE 10+ */
color:#000 !important;
}
:-moz-placeholder { /* Firefox 18- */
color:#000 !important;
}

 



This topic has been closed for comments

6 replies

Hello James, 


Are you talking about the search bar on the front (main) page? 


If so, try the following code:

.hc-search-input input.special {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: black;
}

 It will change it like this:


image



Kind of, not the entire bar, just the placeholder text!



Oh I see, try the following (this works in chrome):

 

 

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

 

image


This works for me (tested in Chrome).

LOL Look up, I tried that, and nope.... Adjust to include the input and still the same.

I have the input text in black but not the darn placeholder.....



 Tried this and without the "input"

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

 And result is same for all browsers


On inspector I am seeing the styling applied but still its not displayed.... I was thinking myabe some script but as we havent added anything I am really at a loss on this one...

image



That is very odd...


Out of curiosity, which browser (and version) are you trying? 


I tried in both Chrome and Firefox (latest versions).


I added these to my stylesheet and it seemed to do the trick:


input::-webkit-input-placeholder{ /* Chrome */
color:red;
}

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

 This one is from Firefox:


image


I tried the code you pasted in your first post. 


Can you remove the two lines: 

.ui-autocomplete, .ui-state-hover, .ui-state-active, #support-search-input, .ui-autocomplete-input {color:#000 !important;}

.ui-autocomplete-input::placeholder {color:#000 !important;}

 And only have:


 

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:#000 !important;
}
::-moz-placeholder { /* Firefox 19+ */
color:red !important;
}
:-ms-input-placeholder { /* IE 10+ */
color:#000 !important;
}
:-moz-placeholder { /* Firefox 18- */
color:#000 !important;
}

 

And see if that works? 



got it now, thx very much 🙂