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

これは、入力の右上、左下、左下に2ピクセルの黒い枠線を配置します。