CODEWITHSUNDEEP
htmlcss
Telirw
Telirw

Reputation: 443

border-box of input not working as expected

When I set border-box to input without a specific height and width, padding increases the width of the input. On the other hand, if I do the same, but with a established size, then it works as normal as on a regular div, setting the padding without changing the width of the input.

Short snippet

#input1 {
  box-sizing: border-box;
  padding: 0 10px;
}

#input2 {
  width: 200px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  input1: <input type="text" name="text" id="input1"> <br/><br/>
  input2: <input type="text" name="text" id="input2">
</body>
</html>

Upvotes: 2

Views: 1829

Answers (2)

clair
clair

Reputation: 1

because border-box is not working. You can try Outline. But Padding will still not work.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272807

From the specification:

Note: In contrast to the length and percentage values, the auto value of the width and height properties (as well as other keyword values introduced by later specifications, unless otherwise specified) is not influenced by the box-sizing property, and always sets the size of the content box.

In your first example you didn't set any width so it's auto and box-sizing with do nothing (content-box will behave the same way as border-box). Padding and borders will logically increase the overall size.

Upvotes: 1

Related Questions