help with search button styling CSS

digital-top · November 2020

Hello

you gave me this code to set the color of the text inside the search button

.mhb-col .search input, .mhb-col .search input::placeholder{

color:#062818 !important;

background:#ffffff !important;

font-family: 'Merryweather' !important;

}

I also would like to have the text "cerca qui" BOLD and centered inside the placeholder

Is that possibile?

Thank you very much

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

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

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

digital-top · November 2020

Dear Phil

thanks a lot!

It works!

;-)

help with search button styling CSS

Comments