0

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 />
Gerard
  • 15,418
  • 5
  • 30
  • 52
Arif
  • 3
  • 1
  • that's the ``:focus`` state of the input, not the normal state. So you need to override the focus state too. – OMi Shah May 04 '22 at 10:42

3 Answers3

0

maybe you need change the border on focus:

input:focus {
    margin-top: 10px;
    width: 25%;
    height: 39px;
    border: 0;
    border-bottom: 2px solid rgba(137, 43, 226, 0.562);

}

Simon
  • 31
  • 1
  • 5
0

You need to update your CSS with the below code and it works for you.

    input,
    input:focus,
    textarea:focus,
    select:focus {
       margin-top: 10px;
       width: 25%;
       height: 39px;
       border: 2px solid rgba(137, 43, 226, 0.562);
       border-top: 0px;
       border-right: 0px;
       border-left: 0px;
       outline: none;
    }
Meet
  • 328
  • 3
  • 15
0

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 />
Gerard
  • 15,418
  • 5
  • 30
  • 52