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

[JBshop1]

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?

[sabrify · Accepted solution]

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, 

[JBshop1]

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!!

[sabrify]

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,

[JBshop1]

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;

}

```