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.
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?
source to share
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/
source to share