Search Box CSS


I’m trying to figure out how to make CSS edits on my search box widget that is in my sidebar.

I’m looking for edits concerning:

  • background color
  • font style within the box …the “search…” text
  • font color
  • radius on box
  • ability to show a magnifying glass as a search button? If not, ability to show a search button outside of the box and how to customize it.



.search-form input {
       background-color: #333;
       color: #f5f5f5;
       border-radius: 5px;
.search-form::before {
    content: '\f002';
    font-family: Fontawesome;
    margin-right: 10px;
    font-size: 18px;
    color: #666;

Add this first please and let me know afterwards as you might need to style the placeholder as well.

Thanks Vlad,

That partially worked - the “.search-form input” section worked, but I don’t see anything from the “.search-form::before” section.

Here’s a link to my site so you can see. Thanks so much for your help!

It’s because you’ve built your sidebar with the page builder and it overrides that code. Thought you have a regular sidebar.

Replace content: '\f002'; with content: '\f002' !important;. Let me know how it goes :slight_smile:

Unfortunately I didn’t have luck with that change either. I am using the page builder on the link I gave you above, however I am also have the widget in my sidebar on my post page. Perhaps that is confusing things somehow?

thanks again!

Hmm, it looks like on your website you have a space in .search-form:: before. It should be .search-form::before