I would like to have a search box that has a text placeholder reading “Type here to search” or something similar so that users know what that box is all about. I am styling it as a simple square box so no icon will be displayed.
Can this be done and how?
Definitely! This is achievable with the HTML5 placeholder attribute.
Just add the placeholder attribute to your search input field, like so:
<input type="text" id="st-search-input" class="st-search-input" placeholder="Type here to search..."/>