Remove all borders expect bottom using css

Question

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

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

score 0 · Answer 1 · answered May 04 '22 at 10:34

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

}

answered May 04 '22 at 10:34

Simon

31
1
5

score 0 · Answer 2 · answered May 04 '22 at 10:35

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

score 0 · Accepted Answer · answered May 04 '22 at 10:36

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

Remove all borders expect bottom using css

3 Answers3