color of search box

• 

  danielpepijn · Member · Mar 23, 2016 at 2:55 pm

  • Copy link
  • Add topic to favorites

  Hi all
  I’d like to change the color of my search box (top right on homepage) from black to white.
  What would be the CCS code?

  thanks!

  Daniel

  The blog I need help with is: (visible only to logged in users)

• 

  swoolz · Member · Mar 23, 2016 at 4:25 pm

  • Copy link

  Hi there,
  Try the following code:

  #masthead input.searchfield {
      background: #ffffff none repeat scroll 0 0;
  }

  Did that do the trick?

• 

  danielpepijn · Member · Mar 23, 2016 at 7:26 pm

  • Copy link

  No unfortunately…

  Do you have an alternative?

  thanks

• 

  swoolz · Member · Mar 23, 2016 at 7:53 pm

  • Copy link

  Hmm, I didn’t notice that it turned back to black upon a mouse hovering over it; I wonder if that’s what you’re seeing?

  Try the following code–I might have a little more code than you need (though it won’t change anything else), but this should help. =)

  #masthead input.searchfield {
      background: #ffffff none repeat scroll 0 0;
      color: #bfbfbf;
  }
  
  #masthead input.searchfield:focus, #masthead input.searchfield:hover {
      background: #ffffff none repeat scroll 0 0;
      color: #bfbfbf;
  }

  Did that one work?

• 

  thesacredpath · Member · Mar 23, 2016 at 8:09 pm

  • Copy link

  @filippaanais, on this change, we will have to add the !important keyword to the CSS declarations. Give the following a try.

  #masthead input.searchfield {
      background: #fff !important;
      color: #000 !important;
  }

• 

  swoolz · Member · Mar 23, 2016 at 8:16 pm

  • Copy link

  Thank you for your help, thesacredpath!

  I’m going to research that modifier now. =)

• 

  thesacredpath · Member · Mar 23, 2016 at 8:20 pm

  • Copy link

  You are welcome. In general it is a good practice to avoid using it, but sometimes it has to be used due to the way things in a theme are structured. Many/most times though you can find or create a more specific CSS selector and not have to use !important. Not in this case though. :)

• 

  danielpepijn · Member · Mar 23, 2016 at 10:12 pm

  • Copy link

  thanks both! issue solved :-)

• 

  thesacredpath · Member · Mar 24, 2016 at 3:11 am

  • Copy link

  Awesome, and you are welcome.