CODEWITHSUNDEEP
htmlcssgoogle-chrome
R Reveley
R Reveley

Reputation: 1584

Chrome search input width not same as text input

In Firefox text and search input types both appear to be the same width.

In Chrome they are different widths.

Funnily enough my Codepen http://codepen.io/rachelreveley/pen/eBpyzK has the opposite result to my actual code (search appears wider).

input {
  width: 100%; 
  padding: 1rem;
  box-sizing: padding-box !important;
}

form {width: 500px;}
<form>
	<input type="search" placeholder="Search" />
	<input type="text" placeholder="Text" />
</form>

enter image description here

Upvotes: 1

Views: 1599

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You shouldn't use the padding-box anymore:

The width and height properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50. https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

But why is this happening?

So you are using the not supported padding-box, Google Chrome is using the default values for box-sizing. The default value for the <input type="search"> is border-box. The default value of the <input type="text"/> is content-box.

See this example (should look like your example):

input {
  width: 100%; 
  padding: 1rem;
}
input[type="search"] {
  box-sizing:border-box; /** default for this input */
}
input[type="text"] {
  box-sizing:content-box; /** default for this input */  
}
form {
  width: 500px;
}
<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

You can use border-box instead:

input {
  width: 100%; 
  padding: 1rem;
  box-sizing: border-box;
}
form {
  width: 500px;
}
<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

Difference between padding-box and border-box?

On border-box the width and height of the element includes the content, padding and border but not the margin of the element. On padding-box the width and height includes the content and padding but not the border and margin.

So if you want to simulate the padding-box you have to include the width of the border to the padding and using the border-box.

Your example would look like this:

input {
  width: 100%; 
  padding: calc(1rem + 2px);
  box-sizing: border-box;
}
form {
  width: 500px;
}
<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

Hint: The default width of the <input> border is 2px.

Upvotes: 4

Related Questions