Remove all borders expect bottom using css

Issue

I have removed all borders except the bottom from my text input field. But when I start to write on the field, it appears again. How to solve it?

input {
  margin-top: 10px;
  width: 25%;
  height: 39px;
  border: 2px solid rgba(137, 43, 226, 0.562);
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
<input type="email" placeholder='Enter email' required /> <br />
<input type="password" placeholder='Enter password' required /> <br />

Solution

What you see when you enter the input field is not the border, but the outline. See the required adjustment below to avoid seeing the outline.

input {
  margin-top: 10px;
  width: 25%;
  height: 39px;
  border: 2px solid rgba(137, 43, 226, 0.562);
  border-top: 0;
  border-right: 0;
  border-left: 0;
  /* Added */
  outline: none;
}
<input type="email" placeholder='Enter email' required /> <br />
<input type="password" placeholder='Enter password' required /> <br />

Answered By – Gerard

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.