Text Inputs with Icon and Decorative Line

You've been there. You have a beautiful input with focus styles enabled, and the client requests an icon to be added to each text 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 simpler 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 seen in the banner image.

To achieve the 2-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 often used to achieve the Input Icon component. Since the search icon only provides a visual enhancement, it need not be available to screen readers. So 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.

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