To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

DAWN: Custom Field input class="field__input" does not give borders around the box in it's static st

New Member
2 0 0

So, as said in the title, I am working on custom fields on my product page and I am able to add them, but I saw in the tutorial that you can pass off the formatting to class="field__input" and I wanted to do that, but when I do so the text box border disappears until it is highlighted which with a white background creates for a non intuitive UI.

Field input Regular.PNG


As shown below, there is a text box.

Field input Highlighted.PNG

I am guessing that it has something to do with the way I have changed colors or the class "field__input" needs to be changed to be the same in it's static state when it is highlighted.

Hope someone knows how to fix thix, meanwhile I will use the regular input box without the class mentioned above.



Appreciate the help!

Replies 2 (2)
New Member
2 0 0

I have added this code to the main.product. liquid after this line: 


{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}



{% if product.template_suffix == 'custom-product' %}
<p class="cart-attribute__field">
<label for="dodajte-dostignice-npr-100000-follower-a">Dodajte dostigniće (npr. 100.000 follower-a): </label>
<input class="field__input" required class="required" id="dodajte-dostignice-npr-100000-follower-a" type="text" name="attributes[Dodajte dostigniće (npr. 100.000 follower-a): ]" value="{{ cart.attributes["Dodajte dostigniće (npr. 100.000 follower-a): "] }}">
{% endif %}

New Member
1 0 0

Hi, I have the very same problem, did you find a solution yet? Would be much appreciated.