Custom Text Box Shows As White Until You Start Typing

[junique]

Apologies if this has been asked before, I wasn't able to find the answer...

I have just added some code to show on the product page to allow people to enter their information for engraving. This has worked, but both text boxes are white and only show as a black box when someone starts typing. Is there any easy fix for this please?

<div class="product-form__input">
<label class="form__label" for="custom-name">Your Name</label>
<input class="field__input" required type="text" id="custom-name" form="{{product_form_id}}" name="properties[Your Name]" />
</div>

<div class="product-form__input">
<label class="form__label" for="custom-name">Phone Number</label>
<input class="field__input" required type="text" id="custom-name" form="{{product_form_id}}" name="properties[Phone Number]" />
</div>

[EasifyApps-Zoe]

Hi @junique,

I have a great suggestion to simplify the process of creating custom fields on your website using the Easify Product Options app, free plan available. without any coding involved 🤗. Here's a concise guide to help you get started:

• Create a new option set.

• Add your custom fields:

  • Add a Text Box for the "Your Name" field.
  • Add a Number Text Box for the "Phone Number" field.

• Select the specific product(s) where you want to add these custom fields:

Given your site's engraving service, I recommend considering an additional custom option: the "Font Picker" offered by the app. This feature enables your customers to choose the font for their engraved text and even preview how it will appear with their selected font.

Take a look at the demo below for a clearer understanding: