使用css删除除底部以外的所有边框

Question

我已经删除了文本输入字段中除了底部以外的所有边框。但当我开始在这个领域写作时，它又出现了。如何解决?

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

Answer 1

当您输入输入字段时，您看到的不是边框，而是轮廓。请参见下面的必要调整，以避免看到大纲。

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

Answer 2

也许你需要改变焦点的边框:

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

Answer 3

你需要用下面的代码更新你的CSS，它为你工作。

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