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.
1

Hi,

I’m new to Shopify, trying to add a contact form while removing its top/right/left border. Even though I can see the borders from the webpage, I can’t disable it by adding styles to .input, .textarea. When I inspect the page, the components don’t seem to have border yet I can still see it!

Could you help me with this? Where’s the border coming from?

2

Hi,
The border you’re seeing isn’t an actual border on the input element, it’s created by a pseudo-element (using ::after) that applies a box-shadow.
To remove the border look, you’ll need to override the box-shadow on the ::after pseudo-element.

.field:after, 
.select:after, 
.customer .field:after, 
.customer select:after, 
.localization-form__select:after {
  box-shadow: none !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Cheers,

1 Like
3

Thanks! Do you know what I need to do to customize the border style when it’s focused and after focused? Thanks to you I could change the default style yet it’s still the same when it’s focused and after focused. Thanks!!

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
5

Eventually this is the code I adopted (for others in the future)


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

.field__input:focus {
box-shadow: none;
}
1 Like