How To Remove Black Border Around Search Bar For Mobile

Solved

How To Remove Black Border Around Search Bar For Mobile

MMast
Trailblazer
182 1 25

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:

Screenshot 2024-06-26 201220.png

 

How I would like my site to look:

Screenshot 2024-06-27 004322.png

 

https://decemberschild.com/

password: dc

Accepted Solutions (3)

Raj-webdesigner
Shopify Partner
322 75 78

This is an accepted solution.

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

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

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

JasmeetVT14313
Shopify Partner
224 50 60

This is an 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!

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.

View solution in original post

GTLOfficial
Shopify Partner
269 51 52

This is an 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
12.png

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 3 (3)

Raj-webdesigner
Shopify Partner
322 75 78

This is an accepted solution.

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

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

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


JasmeetVT14313
Shopify Partner
224 50 60

This is an 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!

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.

GTLOfficial
Shopify Partner
269 51 52

This is an 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
12.png

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh