float a icon over a text box without using position absolute

Question

Ive been looking on the internet and could not find any solution to this. It has to be possible. I have a login area. There is a text box with a padlock icon at the start of the text box. No this works using position:absolute;, but then you have to deal with browser positioning differences. Is there a way to float the icon over the tex box without using position:absolute;?

<div class="login_password_box">
    <i class="icon-lock"></i>
    <input type="password" id="login_password" value="" />
</div>

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

you could set the icon as background for the input element. And then position it with background-position.

Have a look at this: Put icon inside input element in a form

#login_password {
    background: url('path/to/image.jpg') no-repeat;
    background-position: left center;
}

working example: http://jsfiddle.net/WZ7jj/

edited May 23 '17 at 11:57

Community

1
1

answered Jul 08 '14 at 07:11

Luc

1,765
5
24
44

1

a left padding applied would make it nicer ofc – Roko C. Buljan Jul 08 '14 at 07:24
1

I was using 'Font-Awesome', but i think I will revert to this solution. Thanks Luc – morne Jul 08 '14 at 07:24

float a icon over a text box without using position absolute

1 Answers1