help with search button styling CSS

digital-top

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

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

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

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

Very useful tip!

Thank you very much!

digital-top

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

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

Dear Phil

thanks a lot!

It works!

;-)