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

CSS

Posted by Michael Williamson
.a{fill-rule:evenodd;}techdegree seal-36
Michael Williamson
Front End Web Development Techdegree Graduate 23,903 Points

Building Forms Question

I'm trying to design a form, and in an input text box, I need to have placeholder text to the right of the box and be able to enter text on the left.

Right now my text cursor is align with the placeholder to the right.

Any suggestions?

Carlos Martinez
Carlos Martinez
10,660 Points

It would be best if you show us your actual code.

1 Answer

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

I don't believe you can set the positioning of placeholder text through CSS. What you could do instead is use an absolutely-positioned label element inside a relatively-positioned container, so that the label appears to be inside the text box. So, a structure like this:

<div class="field-wrapper">
  <input type="text" id="fname" name="fname" />
  <label for="fname" class="placeholder">First name</label>
</div>

Then it's just a matter of giving it the appropriate CSS so that the label appears positioned over the right side of the text box.

David Bath
David Bath
25,940 Points

Here's some CSS for a prototype:

        * {
            box-sizing: border-box;
            font-family: sans-serif;
        }
        .field-wrapper {
            position: relative;
            width: 300px;
        }
        .field-wrapper .placeholder {
            position: absolute;
            width: 100%;
            top: 0;
            right: 0;
            padding: .4rem;
            text-align: right;
            color: lightgray;
            display: block;
        }
        .field-wrapper input[type='text'] {
            width: 100%;
            height: 2rem;
            padding: .2rem;
        }
        input:focus + .placeholder {
            display: none;
        }