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

Store Design
, ,

Topic summary

A user successfully created a dropdown menu caret for a contact form but encountered sizing and positioning issues.

Initial Problem:

  • The caret icon was too large for the dropdown field
  • User followed code from a previous discussion but needed size adjustments

Solution Provided:

  • Add CSS styling to theme.liquid file (before tag)
  • Adjust caret dimensions using width and height properties
  • User modified the suggested 0.6rem size to 1rem, which resolved the initial sizing issue

Remaining Issues:

  • The caret now appears outside the dropdown menu boundary
  • The dropdown box displays two overlapping layers
  • Screenshots were shared showing both positioning problems

Current Status:

  • Discussion remains open with troubleshooting ongoing
  • User shared store URL (247chic.com) for further assistance
  • Awaiting additional guidance to fix caret positioning and layering issues
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
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
Screenshot 2024-10-07 at 5.48.33 PM.png1548×1060 49.3 KB

2

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 on theme.liquid

.select .icon-caret { height: 0.6rem !important; width: 0.6rem !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

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
Screenshot 2024-10-07 at 6.05.43 PM.png1586×794 42.2 KB

4

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

5

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

6

and now the box seems to have two layers.

Screenshot 2024-10-07 at 6.36.32 PM.png
Screenshot 2024-10-07 at 6.36.32 PM.png1560×292 17.2 KB

7

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

thank you!