Get rid of blue border around search box when searching store

[flammagreg]

Hi guys,

How can I get rid of the blue border around the search box? Website: seraneeva.com. Pic for reference

[BSSCommerce-HDL]

Hi @flammagreg ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

#SearchContainer #search-input {
  outline: none !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[flammagreg]

Thank you!! Do you also know how to do the same underline animation effect as in the newsletter in the footer when a user clicks into it?? The code used to produce the newsletter animation effect:

#newsletter-footer_form .footer-email-input:focus {
outline: none;
}
#newsletter-footer_form .footer-email-input {
border-bottom: 2px solid var(–color-scheme-border-color);
}
#newsletter-footer_form .input-group:before {
display: none;
}
#newsletter-footer_form .input-group:after{
position: absolute;
bottom: 1px;
border-bottom: 1px solid #fff;
content: “”;
display: block;
margin: 0 auto;
transition: width .8s cubic-bezier(.5,0,0,1);
width: 0;
left: 50%;
transform: translateX(-50%);
}
#newsletter-footer_form .input-group:focus-within:after {
width: calc(100% + 2px);
}
#newsletter-footer_form #subscribe{
position: absolute;
color: #fff;
margin: 0;
bottom: 2px;
right: 0;
padding-left: 0;
padding-right: 0;
}
#newsletter-footer_form .input-group {
width: 60%;
}