A Responsive Text Input Form Field

When most people want a responsive text input form field they wrap it in a div. There's a more concise way.
The example

See the Pen A Responsive Text Input Field by Tipue () on CodePen.

The HTML
Just an input field and a class. No wrapper.
HTML
The CSS
The three properties that matter are width, max-width and box-sizing.
CSS
The width value should always be 100%, while max-width can be anything. The box-sizing value must be border-box.

The max-width and box-sizing properties are supported by IE9+, Edge 16+, Chrome 49+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 66+ and Samsung Internet 4+.

More from Tipue