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

Try:

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

Это поместит черную рамку 2px в верхней, правой, нижней и левой частях вашего входа.