How To Remove Black Border Around Search Bar For Mobile

[MMast]

Thanks in advance!

I am looking to remove the black border around my search bar on mobile. I am looking to keep the actual search bar just remove the black border. Example shown below.

How my site looks:

How I would like my site to look:

https://decemberschild.com/

password: dc

[Raj-webdesigner · Accepted solution]

Add this css in your edit code > base.css file

.field .field__input:focus {
    box-shadow: none !important;
    outline: none !important;
}

[JasmeetVT14313 · Accepted solution]

Hi @MMast 

Try adding below code to end of component-search.css file

@media screen and (max-width:767px){
header .search-modal__content .search__input {
    box-shadow: none;
}
}

 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

[Raj-webdesigner · Accepted solution]

Add this css in your edit code > base.css file

.field .field__input:focus {
    box-shadow: none !important;
    outline: none !important;
}

[JasmeetVT14313 · Accepted solution]

Hi @MMast 

Try adding below code to end of component-search.css file

@media screen and (max-width:767px){
header .search-modal__content .search__input {
    box-shadow: none;
}
}

 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

[GTLOfficial · Accepted solution]

Hello @MMast 
Go to online store ---------> themes --------------> actions ------> edit code-------> base.CSS -----> line number 1679
Add this code

.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select:after {
box-shadow: none;
outline: 0;
border-radius: var(--inputs-radius);
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks