Text inputs with icon and decorative line

1 August, 2016

You've been there. You have a beautiful input with focus styles enabled, and the client requests an icon positioned within the right or left corner of the input. Of course, it should be vertically centered as well.

If your boilerplate or framework hasn't accounted for this, you begin the slightly painful task of adding extra markup, and possibly resetting border-radius and borders on the input.

I much prefer what I consider the simplest approach — add a background image as the icon and save yourself the extra markup. I usually use an SVG as a background image. Last month, a client requested an Input Icon component, with a border to the left of the icon, as in the image below.

To achieve the 1 pixel border, I used multiple background images, with a reference to the search icon SVG as the first value, and a linear gradient as the second value. This allowed me to keep the styling of inputs across the site consistent, and avoid the extra markup that is often used to achieve the Input Icon component. Since the search icon only provides a visual enhancement only, it doesn't need to be available to screen readers. Hence, the background image works, in this case.

You will notice, in the CodePen demo below, that my default class for the text input is input-text, to which I have added a modifier class input-text--search, which contains the extra right padding and multiple background image declarations.

See the Pen Input with icon and decorative line by Karen Menezes (@imohkay) on CodePen.

Hopefully, some of you may find this helpful. Feedback is welcome, as always :)

Related tags: Icons, Inputs, Multiple-Background-Images, SVG

comments powered by Disqus