Search Box CSS


#1

Hi,

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.

Thanks!


#2

Hi,


.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.


#3

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!

http://www.empoweredvet.com/blog/


#4

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:


#5

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!


#6

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