Changing the color inside the search box

Comments

• Air

  January 2013 Posts: 10,970

  Use this custom CSS

  .search-form{
      background-color: #fff;
  }
  #header .search-form:after{
      border-bottom-color: #fff;
  }
  .search-form input[type="search"]{
      color: #000; /* font color */
  }
  .search-form input[type="submit"]{
      background-image: url("images/black/add-ons.png"); /* submit icon */
  }
  

  With regards.
• ananda

  January 2013 Posts: 39

  Thank you so much, again!
  
  That did the trick for the background, but for some reason the font colors and search/ submit button stayed white and are not visible (which I see the code above intended to change).
  
  Let me know if you have any other tips to make the other changes (font color, icon color> black) show up... or, if that doesn't work, even change the text to "Type here to search".
  
  Thank you so much again!
• ananda

  January 2013 Posts: 39

  You can see it (post change) on this page:
  
  http://www.life-beautifully.com/sample-post-with-gallery/
  
  Thank you so much!
• Air

  January 2013 Posts: 10,970

  Hello:-)
  
  Mainly I just gave you CSS, colors was up to you, but my bad that I didn't gave it correct. Strange I was sure, I prepared it right. Btw I see that changing background image it is not so easy via plugin, hover you can try to use this CSS

  .search-form{
      background-color: #000;
  }
  #header .search-form:after{
      border-bottom-color: #000;
  }
  .search-form input[type="search"]{
      color: #fff; /* font color */
  }
  .search-form input[type="submit"]{
      background-image: url("http://www.life-beautifully.com/wp-content/themes/hypershot/images/black/add-ons.png"); /* submit icon */
  }

  Should be better now.
  
  With regards.
• ananda

  January 2013 Posts: 39

  Thank you so much, Air! Yes, I thought reading the codes that you first gave me above that you gave me all in the right colors already too, maybe I read it too quickly :-) Thank you so much!