Border color top/left & right

sorry, the page link is not available!

anyhow you may want to remove the border when the input are in :hover or :focus status. is correct?

a raw solution can be (assuming you want to style the text input):
.wpcf7 input[type="text"] {border:0!important;outline:0!important;box-shadow:inherit!important}

I managed to fix the “hover” and focus color as I’d like.

It’s in “non-hover” mode if that makes sense.

“Namn” is how I would like to view it all the time.
“Epost” is how it currently looks and I would like those thin borders removed.

I need to check your website to know the reason… please share the link if it is possible!

• This reply was modified 3 years, 9 months ago by Erik.

Oh, my apologies. The website is locked for customers as it’s in development right now.

Any other solution where I can send the credentials from the site to you?

• This reply was modified 3 years, 9 months ago by marcus1w.

div#wpcf7-wpcf7-f18-p375-o1 { 
background-color: #787F7D;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
background:#787F7D;
color:#EAE7DF;
border: 0;
border-bottom-color: #EAE7DF;
border-bottom-width: 1px;
border-bottom-style: outset;
font-family:antic-slab, sans-serif; 
font-style:regular;    
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#33312A;
width:20%;
font-family:antic-slab, sans-serif !important; 
text-align:center;
text-transform:uppercase;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #EAE7DF !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #EAE7DF !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #EAE7DF !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #EAE7DF !important;
    opacity: 1;
}

div.wpcf7-validation-errors {
    display: none !important;
}

.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
border-color: #EAE7DF;
border-bottom-color: #EAE7DF;
box-shadow: 0 0 1px #787F7D inset;
}

Our current settings.

It also doesn’t change the family font.

• This reply was modified 3 years, 9 months ago by marcus1w.

no you can’t send any credential and there is no needs, the form css code is enough!

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
border: 0;
border-bottom-width: 1px;

replace border-bottom-width: 1px; with border-bottom-width: 0; at line 13 of the css you sent.

TLDR; I noticed that you put border: 0 but you have to put below the other border code because the instructions are read in sequence and therefore “background: red;” and then “background:blue” results in a blue background.
border is a shorthand for border-width, border-style and border-color so it override all of them in a single shot and can be overridden by those properties

• This reply was modified 3 years, 9 months ago by Erik. Reason: more tldr

I solved it by adding box-shadow: 0 0 1px #787F7D inset; the text, email and tel input field.

Family font doesn’t work in the field or button?
Tried using font-family:antic-slab, sans-serif !important;

yes, you canuse font-family almost everywhere but the correct form is:

font-family: 'Antic Slab', serif;

(don’t forget to import the font with enqueue style)

a little trick when “you can’t use this or that” css property is to remove the user agent style with appearance:none
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

my 50 cents!

Thank you very much for your help.

Resolved the issues I had!