Question

What I’m trying to do could perhaps best be explained in an image (which I’ll include below), but essentially it’s a text input HTML field which is half a pre-existing value and the other half is replaceable. I tried adding both a value and a placeholder field and then separating them via padding-left in CSS, but instead the browser (Chrome) just ignores the placeholder altogether.

Note the separation between the string “turingpages.com/” and “username”. I want to keep “turingpages.com/” un-editable and have “username” act as an HTML5 placeholder. How could I go about achieving this effect?

Answer 1

Just make it two elements and style it as if they were one..

Put them side by side (or even better nest them and make the outer a label so it will work with clicking), and make an input only for the right element.

<label class="group">turingpages.com/<input type="text" placeholder="username"/></label>

and

label.group{
    line-height:40px;
    background-color:white;
    display:inline-block;
    padding:0 10px;
    font-size:14px;
}
label.group input{
    border:0;
    background-color:transparent;
    padding:0;
    display:inline;
    color:#aaa;
}

Demo at http://jsfiddle.net/gaby/ahTJv/