css submit button and input text doesn't have the same width


Though I made the submit button and the input text exactly


but when i run the app, they don't have the same width:

this is a jsfiddle


could you help please?

Problem courtesy of: user2208349


That's because both border-box attributes are different by default..

Use box-sizing: content-box on the button, or box-sizing: border-box on the Input Elements.

Solution courtesy of: Tarulia


I just added

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

and the problem was solved

JSfiddle Demo

Discussion courtesy of: Paulie_D

This recipe can be found in it's original form on Stack Over Flow.