how do i put an icon inside a text input field for example a search icon inside a search box like theydo in Yahoo! or other websites?
icons inside input fields
trefen
Try make the icon background (no-repeat) using css. If you don't want to write over the icon, add padding-left to the css.
Eks:
Write over icon:
Writing next to the icon (change 25 to the width of your icon):
Worked for me
Hope it helps!
Eks:
Write over icon:
| Code: |
| <input type="text" style="background:url( icon.jpg ) no-repeat;"> |
Writing next to the icon (change 25 to the width of your icon):
| Code: |
| <input type="text" style="background:url( icon.jpg ) no-repeat; padding-left:25"> |
Worked for me
Hope it helps!
Now, depending on what you want exactly (custom borders, etc) you can make them using the background tip trefen gave and "border:none;"
then of course you can position it wherever you want using background-position (right, left, top, bottom) or even combione them however you want:
| Code: |
| <input type="text" style="background:url( icon.jpg ) no-repeat; background-position:left;"> |
Related topics
 |