HTML-Eingabeformularrand nicht korrekt formatiert

Question

Ich versuche, einen festen schwarzen Rahmen um meine Formulartexteingabe zu erhalten, aber der Rahmen wird nicht korrekt formatiert. Hier ist mein Code:

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

Aber meine Form Eingang wie folgt aussehen. Was mache ich falsch? .

Answer 1

Sie legen die obere und untere Rahmenbreite auf 0 fest.

Tun Sie das nicht.

#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">

und Sie können alle die redundante Sachen entfernen, während man es

sind

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

<input id="forminput">

Answer 2

Versuchen:

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

Dies wird einen 2px schwarzen Rand an der Oberseite, rechts, unten und links von Ihrem Eingang platzieren.