Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

How does one place an SVG/image inside an HTML input field?

Hello Treehouse Community,

I'm trying to find a way to place an animated SVG image inside a form input field.

I've searched the web and can't seem to find an answer to this. Maybe there's another way to make it appear as though it's inside the form input?

The image below is an example of what I'm looking to do:

SVG inside input

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Thanks for using the images to clearly convey your question!

Input elements are not allowed to have any content (from the DOM perspective), but you can certainly make something appear to be there. The first method that comes to mind is absolute positioning, where you can place any element at any point on the page (including over another element) by using horizontal and vertical offsets.

Here's an MDN page on positioning to get you started, plus it's discussed in a number of courses here that cover CSS layout methods.

Post your existing code or a workspace "snapshot" if you'd like more specific assistance.