Contact form's textarea and input field has borders yet I can't disable it from the code

Store Design
, , ,

Topic summary

A Shopify newcomer encountered difficulty removing borders from a contact form’s input fields and textarea. Standard CSS targeting .input and .textarea had no effect.

Root Cause:
The visible border wasn’t an actual CSS border property but a box-shadow applied via a ::after pseudo-element on the .field class.

Solution Provided:

  • Override the pseudo-element’s box-shadow:
.field:after, .select:after { box-shadow: none !important; }

Follow-up Customization:
The original poster needed to style focus states. The helper explained using :focus pseudo-class with box-shadow values (offset-x, offset-y, blur-radius, spread-radius, color).

Final Implementation:

.field:after, .field:hover.field:after {
  box-shadow: 0 0 0 1px black;
  border-radius: 20px;
}
.field__input:focus { box-shadow: none; }

Status: Resolved. The user successfully customized both default and focus states for their contact form fields.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
4

You’re welcome, you can modify the border of an input (which in this case is using box-shadow to mimic the border style) when it’s focused by using the CSS :focus pseudo-class. For example, if you want to change the border of elements with the class field__input when they receive focus, you can add the following CSS:

.field__input:focus {
box-shadow: 0 0 0 2px #ff6600; 
}

The box-shadow accepts these values in this order: offset-x (0), offset-y (0), blur-radius (0), spread-radius (2px), and color(#ff6600).
Cheers,

1 Like