Why does my text box disappear when clicking elsewhere on my store?

[LuxeEngravables]

Hello,

I created a textbox and a dropdown box for my shopify store that i'll will be launching sometimes soon. For some odd reason I can't seem to get the text box to appear. If I click on the box, it becomes visible. Than if I were to click on some other part of the screen, It disappears. I'll attach the code that I wrote and some screenshots of the problem.

<div class="product-form__input">
<label class="form__label" for= "custom-back">Words on Back</label>
<input class="field__input" type="text" id="custom-back" form="{{product_form_id}}" name="properties[Back Engraving]"/>
</div>

<div class= "product-form__input">
<label class="form__label" for= "custom-format">Font</label>
<select class="select__select" id="custom-format" form="{{product_form_id}}" name="properties[Back Engraving Font]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

[magecomp]

Hello @LuxeEngravables 

can you try this

<div class="product-form__input">
<label class="form__label" for="custom-back">Words on Back</label>
<input class="field__input" type="text" id="custom-back" form="{{product_form_id}}" name="properties[Back Engraving]" display="block"/>
</div>

<div class="product-form__input">
<label class="form__label" for="custom-format">Font</label>
<select class="select__select" id="custom-format" form="{{product_form_id}}" name="properties[Back Engraving Font]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

[LuxeEngravables]

Hello!

Unfortunately, this does not fix the problem, but thank you so much for your reply. Don't know why it's not appearing. 

[EasifyApps-Zoe]

Hi @LuxeEngravables,

I highly recommend exploring the Easify Product Options app for streamlining the creation of custom engraving options on your product pages. This user-friendly tool allows you to implement these options in a matter of minutes without coding.

With the app, you can effortlessly add a text box where your customers can input their desired engraving text. Moreover, it offers the flexibility to include a font selection feature, enabling customers to choose their preferred font style. What's even more impressive is that customers can preview their entered text in the font they've selected 🤗.

To get a better understanding of how this works, I encourage you to take a look at a similar demo created using the app.

[Zel_Minimate]

Hi there, 
I hope you solved this problem already but in case you want to make it ready quickly, you can use Mini:Customization Fields App. This app allows to create multiple fields in various formats like textfield, upload and dropdown etc.