What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change the size of the caret to a customized dropdown menu field in contact form

Change the size of the caret to a customized dropdown menu field in contact form

Ookii
Tourist
7 0 1

I followed the code from this discussion and created the caret for my dropdown menu but the caret size is too big. How can I adjust it to be the appropriate size?

 

Below is my code and the results:

 

      <svg style="display: none">
        <symbol id="icon-caret" viewBox="0 0 10 6" >
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
          </path>
        </symbol>
      </svg>
      
      <div class="field">
        <div class="select">
          <select id="ContactForm-question" style="font-size: inherit; padding-top:0.4rem;" class="field__input select__select" name="contact[question]">
            <option selected disabled>You have question about...</option>
            <option value="Missing Item">Missing Item</option>
            <option value="Wrong Item Received">Wrong Item Received</option>
            <option value="Damaged Item">Damaged Item</option>
            <option value="Others">Others</option>
            <label for="ContactForm-question" style="visibility: hidden;" class="field__label">You have question about</label>
          </select>
          <svg class="icon-caret" aria-hidden="true" focusable="false" viewbox="0 0 10 6" height="1rem;">
      <use href="#icon-caret" />
      </svg>
        </div>
      </div>

 

Screenshot 2024-10-07 at 5.48.33 PM.png

Replies 6 (6)

Tech_Coding
Shopify Partner
418 111 98

Hello @Ookii 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .select .icon-caret {
     height: 0.6rem !important;
     width: 0.6rem !important;
  }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Ookii
Tourist
7 0 1

Thanks so much, it worked!! (I changed for the size to be 1rem)

But the caret is outside of the dropdown menu... Is there any way I can bring it back in?

Screenshot 2024-10-07 at 6.05.43 PM.png

 

Tech_Coding
Shopify Partner
418 111 98

would you like to share your store URL and password if any please.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Ookii
Tourist
7 0 1

How can I do that? Sorry, I'm new to the community.

Ookii
Tourist
7 0 1

and now the box seems to have two layers.Screenshot 2024-10-07 at 6.36.32 PM.png

 

Ookii
Tourist
7 0 1

https://247chic.com/ (sheaff)

thank you!