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。

不要这样做。

＆＃13;

＆＃13;

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

＆＃13;

<input id="forminput">

＆＃13;

＆＃13;

＆＃13;

你可以删除所有多余的东西

＆＃13;

＆＃13;

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

＆＃13;

<input id="forminput">

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试：

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

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