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.

Just an input field and a class. No wrapper.
The three properties that matter are width, max-width and box-sizing.
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 >