How can I format custom fields in a registration form?

[BB_Tech]

Hello I am trying to format some custom fields in my register form. I would like to have an arrow at the end of “How did you hear about us” so customers know it is a dropdown field, I would also like to change this to the same font as my other fields. Lastly how do I format phone on mobile so all the text fits in the box

[NomtechSolution]

1. In the code editor, locate the file “register.liquid” or “create-account.liquid” under the “Templates” or “Sections” folder (depending on your theme structure).
2. Look for the code related to the “How did you hear about us” field. It might look similar to the following:

  
  

​

To add an arrow, you can use CSS to style the <select> element. Add the following CSS code either in the existing stylesheet or in a new CSS file:

select#register-how-hear {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('path-to-your-arrow-icon.png'); /* Replace with the path to your arrow icon */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 25px; /* Adjust the value as needed */
}

[made4Uo]

Hi @BB_Tech

Can you share your website so we can provide a code appropriate for you

[BB_Tech]

https://biggers-market.myshopify.com/

[BB_Tech]

Hello here is the code for the section I mentioned, your css code didnt work

[made4Uo]

@BB_Tech

Thank you but where is this section at? Can you provide the link?

[BB_Tech]

This Section appears when an item is added to the cart, If you would like to discuss further I can help you figure this part out, I can add a special customer tag to give you access

[BB_Tech]

Hey sorry this section appears when you click the sign up button, my last response was wrong

[made4Uo]

Hi @BB_Tech

Thank you for the clarification

You want:

1. Have an arrow at the end of “How did you hear about us?” - this is already done

2. Format the phone text - I do not see the Required for Delivery Notification"

3. Change to same font - See instructions below

Instructions:

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

#create_customer select {
font-family: var(--font-body-family);
}

[BB_Tech]

Thanks so much that is a huge help, sorry about the confusion I removed the "Required for Delivery Notification" because on mobile version it doesn’t fit in the box. I just added it back, if you could look at it now that would be a huge help!

[made4Uo]

Hi @BB_Tech

No problem at all. For the Phone label. Please remove the text Required for Deliver Notification and add the code below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

#create_customer label[for="AddressPhoneNew"]:after {
    content: "*Required for Delivery Notification*";
    font-size: 9px;
}

Result here: