contact us form - border setting

[MaBa]

Hi community, 

I would like to change the layout ot the contact us to this:

 

In the base.css file I changed the the following parts:

The following removes the all around border and  adds the border at the bottom (input fields):

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
pointer-events: none;
content: '';
position: absolute;
top: var(--inputs-border-width);
right: var(--inputs-border-width);
bottom: var(--inputs-border-width);
left: var(--inputs-border-width);
/* REMOVE BORDERS FROM INPUT IN FORMS
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));*/

/* ADD BOTTOM BORDER FROM INPUT IN FORMS*/
border-bottom: 1px solid black;
transition: box-shadow var(--duration-short) ease;
z-index: 1;
}

and the following to add the all around border to the text area:

.text-area {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
min-height: 10rem;
resize: none;
/* REMOVE BOTTOM BORDER FROM TEXT AREA IN FORMS*/
border-bottom: none;
/* ADD BORDER TEXT AREA IN FORMS*/
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

The problem is that I get a double bottom border now in the text area because I cannot unset the field setting.

Any help would be appreciated...

[ExpertRookie]

Hi @MaBa 
Thank you for your question. 
Please share your store URL, page URL and also password (if your store has one) so we can help you.

[MaBa]

Womanly.se

The form is in the page om womanly

[ExpertRookie]

Hi @MaBa 
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.field__input, 
.field input,
.field:after {
box-shadow: none!Important;
}

[MaBa]

It didn't work because removed the all around border from the text area (see picture)

[ExpertRookie · Accepted solution]

Hi @MaBa 
if you don't want to remove the border of the text area, you can replace the code with this

.field__input, 
.field input,
.field:after {
box-shadow: none!Important;
}
.text-area.field__input {
border: 1px solid black;
}