How do you line up icon, submit and input field in line ?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you line up icon, submit and input field in line ?

Post by simonmlewis »

We want to be able to let people filter their searches on some of our websites, and we like the method this particuar search engine uses.

But how do they achieve this layout, I guess with CSS, but no idea how they line it all up, or make the icon appear to be inside the input text box (if indeed it is that!).

Any ideas?
Attachments
example of form
example of form
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you line up icon, submit and input field in line

Post by Celauran »

https://jsfiddle.net/jh48yszo/

Literally copy/pasted from 'View Source'
Post Reply