HTML 输入表单边框样式不正确

Question

我试图在我的表单文本输入周围设置一个纯黑色边框，但该边框的样式不正确。这是我的代码：

#forminput {
  border: solid black !important;
  border-top: solid black !important;
  border-bottom: solid black !important;
  border-width: 0 2px !important;
  border-radius: 2px;
}
button {
  width: 100px !important;
  height: 30px !important;
  background-color: #095ba0 !important;
  border: 1px !important;
  border-color: #095ba0 !important;
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}

<form action="*" method="POST">
  <input id="forminput" type="text" name="uid" placeholder="Username" ><br><br>
  <input id="forminput" type="password" name="pwd" placeholder="Password" ><br><br>
  <button type="submit">Sign In</button>
</form>

但我的表单输入如下所示。我究竟做错了什么？ .

Answer 1

您将顶部和底部边框宽度设置为0。

不要那样做。

#forminput {
  border: solid black!important;
  border-top: solid black!important;
  border-bottom: solid black!important;
  border-width: 2px!important;
  border-radius: 2px;
}

<input id="forminput">

您可以在使用时删除所有多余的东西

#forminput {
  border: solid black 2px;
  border-radius: 2px;
}

<input id="forminput">

Answer 2

试试：

#forminput {
    border: 2px solid #000;
}

这将在您输入的顶部、右侧、底部和左侧放置一个 2px 纯黑色边框。