help with search button styling CSS

Comments

• Phil

  November 2020

  Hello,

  Please, add two lines from the bottom of the following Code to the Code you mentioned above, to have something like this:

  .mhb-col .search input, .mhb-col .search input::placeholder{
     color:#062818 !important;
     background:#ffffff !important;
     font-family: 'Merryweather' !important;
  /* add these two lines*/
     text-align: center!important;
     font-weight: 900!important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• digital-top

  November 2020

  thanks a lot!

  It works for bold but not really for center ... it'a bit too much on the right

  

  please let me know

  Thank you
• Phil

  November 2020

  In fact it is in the center, but there is white search icon, and it blends with background.

  

  You can change its color in Betheme -> Theme options -> Colors -> Header, "Top Bar Right | icon color", but it will also change the color of shopping cart. If you want to change the magnifying glass icon only, you will have to use Custom CSS Code.

  .search.field .icon-search-fine{
     color: #000!important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• digital-top

  November 2020

  Very useful tip!

  Thank you very much!
• digital-top

  November 2020

  Hi there,

  I guess I still have a problem with this

  When you start writing inside the search button there is a dark green color with a dark green background so you don't see what you are typing...

  

  Is it possibile to keep a white background and a dark green color for the text?

  Thank you!
• Phil

  November 2020

  Please, use the following Custom CSS Code.

  .mhb-item .search form{
  background: white !important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• digital-top

  November 2020

  Dear Phil

  thanks a lot!

  It works!

  ;-)