Input style problem in html really unusual

September 17, 2022

I have a question. Why does the style on the input (border-color) make me make this dark green line? it should be all light green!

.contact .contact-content input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-color: rgb(0, 255, 72);
border-radius: 5px;
border-width: 3px;
font-family: 'Poppins', sans-serif;
}

picture of the problem

>Solution :

It was because you haven’t added the border style to the input. The border style for elements is set inset by default. Take a look at mdn.

input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 5px;
/* border-color: rgb(0, 255, 72);
border-width: 3px;
border-style: solid; */
/* Use shorthand method */
border: 3px solid rgb(0, 255, 72);
font-family: 'Poppins', sans-serif;
}