sparkles2.png

Search - Border Radius & Increased Height

 

This effect will convert your search bar to be thicker and have a nice border surrounding it.

 
 
 

See the effect in action

 
Screenshot 2021-07-08 at 17.37.33.png
 
 
 

How to use the Effect

Head to your 'edit CSS' section of Blocklab, paste in the below code, hit 'Save' and then publish the site on the front end for the code to take effect.

 

CSS

#shop #blocklab-header [id^=search-default2] i {
    color: #282828 !important;
}
#shop #blocklab-header [id^=search-default2] input::placeholder {
    color: #282828 !important;
}
#shop #blocklab-header [id^=search-default2] .input-group button {
    background-color: #fff !important;
    border-left: none !important;
    height: 54px;
    padding: 0px 10px;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
#shop #blocklab-header [id^=search-default2] .input-group input {
    background-color: #fff !important;
    border-right: none !important;
    box-shadow: 0px 0px 0px 0px !important;
    color: #1e2171 !important;
    padding: 25px 10px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}