CODEWITHSUNDEEP
htmlcss
user7321171
user7321171

Reputation:

HTML input form border not styling correctly

I am attempting to get a solid black border around my form text input, but the border will not style correctly. Here is my 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>

But my form input look like below. What am I doing wrong? this.

Upvotes: 1

Views: 51

Answers (2)

Jam1e
Jam1e

Reputation: 43

Try:

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

This will place a 2px solid black border on the top, right, bottom and left of your input.

Upvotes: 0

Quentin
Quentin

Reputation: 943240

You set the top and bottom border widths to 0.

Don't do that.

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

and you can remove all the redundant stuff while you're at it

#forminput {
  border: solid black 2px;
  border-radius: 2px;
}
<input id="forminput">

Upvotes: 2

Related Questions