Change color of text "Search" in Search Bar

[EJ Hunyadi]

There is text within the search box that says, "Search." We need to change the color of that (and not the color of the text once you start typing). How can this be accomplished? None of the attributes in the View Color Scheme Settings section changes this default behavior.

[Jiri Hronik · Accepted solution]

Color Scheme does not have an option for this but you can add a custom stylesheet in Administration > Global Stylesheet (https://your-confluence-url/confluence/admin/viewstylesheet.action).

To change placeholder color of the search box, use this with your choice of colour:

#quick-search-query::-webkit-input-placeholder { /* Edge */
    color: yellow;
}

#quick-search-query:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: yellow;
}

#quick-search-query::placeholder {
    color: yellow;
}

Note that the global stylesheet change will not apply while you're in Administration. Navigate to e.g. Confluence Dashboard to verify your change.

More info about how to use the CSS selector can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

[EJ Hunyadi]

@Jiri Hronik THIS WORKS!!! Thank you so much!

[Casper Hjorth Christensen]

Hi Jiri Hronik

Would you have something similar for Jira?

currently we have the following inserted

---

<!-- SEARCH BAR CHANGE START -->
<!-- workaround for https://jira.atlassian.com/browse/JRASERVER-38890 -->
<!-- Searchbar recoloring -->
<style>
#quickSearchInput {
border-radius: 5em;
background: rgb(75,100,85);
color: rgb(241,240,237);
}

#quickSearchInput::-webkit-input-placeholder {
color: rgb(241,240,237);
}
#quickSearchInput:-moz-placeholder {
/#quickSearchInput FF 4-18 #quickSearchInput/
color: rgb(241,240,237);
}
#quickSearchInput::-moz-placeholder {
/#quickSearchInput FF 19+ #quickSearchInput/
color: rgb(241,240,237);
}
#quickSearchInput:-ms-input-placeholder {
/#quickSearchInput IE 10+ #quickSearchInput/
color: rgb(241,240,237);
}

.aui-header .aui-quicksearch::after{
color: rgb(241,240,237);
}
</style>
<!-- SEARCH BAR CHANGE END -->

---

However it doesnt change the color of the static opague "search" text, only background and the text we insert

[Jiri Hronik]

Hi @Casper Hjorth Christensen 

You should be able to achieve the placeholder text styling in Jira using the same solution.

It depends on the browser you use. For instance this should work in majority of current browsers including Chrome, Firefox, MS Edge, Safari and others:

#quickSearchInput::placeholder {
    color: rgb(241,240,237);
}

Your example has various vendor prefixes like -moz- or -webkit-input-, those are mostly not needed any more unless your users are on older browser versions.

The compatibility and possible required prefixes for the `::placeholder` pseudo-element are described in the table in https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#browser_compatibility - click on the "..." to see details on which version of the browser required prefixes.

Hope it helps!