Remove all borders expect bottom using css

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 />

3 answers

  • answered 2022-05-04 10:34 Simon

    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);
    
    }
    
    

  • answered 2022-05-04 10:35 Meet

    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;
        }
    

  • answered 2022-05-04 10:36 Gerard

    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 />

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum