How can I make a split text input tab?

What I am trying to do is perhaps best explained in an image (which I explain below), but essentially it is an input

HTML textbox that is half of the already existing value and the other half is replaceable. I tried adding both the field value

and placeholder

and then splitting them by padding-left

in CSS, but instead the browser (Chrome) just ignores it placeholder

altogether.

An example image

Notice the separation between "turingpages.com/" and "username". I want to keep "turingpages.com/" uneditable and have "username" as an HTML5 placeholder. How can I achieve this effect?

+3


source to share


1 answer


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

Put them next to each other (or better yet, nest them and make an outer a label

so it works with a push), and do input

only on the correct 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/

+3


source







All Articles