Dawn Theme | Add border radius to size selector.

Solved
Ell_Soll
Pathfinder
91 0 23

Hi,

How I can add border radius to the dropdown size selector in the product page?

 

Site URL: ellsoll.com

 

Untitled.png

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Re-edit it add important. 

 

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {
    border-radius: 5px !important;
}

 

And Save. 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Yup check this one. Or paste it on the buttom where you add the previous code. 

 

.select__select, .customer select:active {
    box-shadow: none !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 7 (7)
Made4uo-Ribe
Shopify Partner
4122 946 1152

Hi @Ell_Soll 

Try this one.

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {
    border-radius: 5px;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1699819231064.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

I have put the code in the base.css and it's not work.

Maybe other file?

Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Re-edit it add important. 

 

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after {
    border-radius: 5px !important;
}

 

And Save. 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Great!

I have put it in theme file.

anyway to remove the straight line border?

 

Untitled.png

Made4uo-Ribe
Shopify Partner
4122 946 1152

Which border, the thick one? Or border in the sizes?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

The thick one.

Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Yup check this one. Or paste it on the buttom where you add the previous code. 

 

.select__select, .customer select:active {
    box-shadow: none !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com