Border-box only works with input text, and not input submit

Am I right about this because I searched all over and couldn’t find an answer on this.

It seems to have no effect on input submit.

input[type=text] {
  font-size: 22px;
  width: 200px;
  height: 31px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  width: 46px;
  height: 31px;
  background: #000000;
  border: 1px solid #0059dd;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}

Yes it does it has the border box model applied by default in the UA style sheet.

Use devtools in Chrome to see all the author and UA applied styles.

How come when I remove
box-sizing: border-box;

There is no visual difference in the code?

Do you see any visual difference at all?

Added:

input[type=submit] {
box-sizing: border-box;

Removed

input[type=submit] {

Because as I said above that is the default UA styles for that element. You would need to change it to the model you want.

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  width: 46px;
  height: 31px;
  background: #000000;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
  box-sizing:content-box;
}

There will never be a visual difference with this:
box-sizing: border-box;

Inside the CSS:
No matter what is done to it.

input[type=submit] {
}

Are you not listening?

Border-box has been applied by default by the UA. Adding it again will make no difference!

Removing it from your own rule will make no difference because it already has been applied by the browser.

Adding the same rule to an element will never make a difference.

The UA rules need to be overridden as in my example above.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.