Solved

Remove blue border around button when clicked

flammagreg
Trailblazer
250 0 38

Hi guys,

 

Website: seraneeva.com

 

How can I remove the blue border around the "sort by" dropdown when clicked?? To get there you click on the "buy now" button. I would really appreciate any help!

Accepted Solution (1)
Rahul_dhiman
Shopify Expert
123 20 36

This is an accepted solution.

So here is the code insert it in theme.liquid 

Steps :
1: Online store >>> themes >> select theme click on three dots (...) and then click on Edit Code 
2: Find file named : theme.liquid 
3: find in the file </head> 
4: Above that add this code .

<style>
:focus-visible {
    outline: none !important;
}
<style>

 

This should make things work .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 9 (9)

Rahul_dhiman
Shopify Expert
123 20 36

Hello @flammagreg ,
So which border ?

 

f9e0bc8e-bc83-4af4-b195-a1d8dc066470.png

In this I see black Border when selected .--> This can be changed via css code . Let me know if you are looking for this I will send code for this then.


Then the blue background for option selected :--- > This cannot be changed as this is default behaviour of Browser .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
flammagreg
Trailblazer
250 0 38

This border

Screenshot 2024-05-31 at 10.53.33 AM.png

flammagreg
Trailblazer
250 0 38

Do you also know how to edit which options are in the dropdown? I don't want the alphabetically options and probably some other ones

Rahul_dhiman
Shopify Expert
123 20 36

For this , The option would be editing the code in the theme .  Which is not possible to check unless logged in to the store .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
flammagreg
Trailblazer
250 0 38

Could you log in and check?? I could dm you the collaborator code

Rahul_dhiman
Shopify Expert
123 20 36

sure

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
flammagreg
Trailblazer
250 0 38

I messaged you

Rahul_dhiman
Shopify Expert
123 20 36

This is an accepted solution.

So here is the code insert it in theme.liquid 

Steps :
1: Online store >>> themes >> select theme click on three dots (...) and then click on Edit Code 
2: Find file named : theme.liquid 
3: find in the file </head> 
4: Above that add this code .

<style>
:focus-visible {
    outline: none !important;
}
<style>

 

This should make things work .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
flammagreg
Trailblazer
250 0 38

Thank you!! Do you know how to edit 'sort by' dropdowns on collection page??