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+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 66+ and Samsung Internet 4+.

More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More

Using CSS Feature Queries

CSS feature queries are now supported everywhere. They allow you to use cutting edge CSS with subtle and precise feature detection.

More