如何创建拆分文本输入占位符?

时间:2013-01-28 17:36:34

标签: html css

我想要做的最好也许可以在图片中解释(我将在下面包含),但基本上它是一个文本input HTML字段,它是预先存在的值的一半,另一个是一半是可更换的。我尝试添加valueplaceholder字段,然后通过CSS中的padding-left分隔它们,但是浏览器(Chrome)只是忽略了placeholder

An example image

请注意字符串“turingpages.com/”和“username”之间的分隔。我想保持“turingpages.com/”不可编辑,并让“用户名”充当HTML5占位符。我怎么能实现这个效果?

1 个答案:

答案 0 :(得分:3)

只需将它设为两个元素,然后将其设置为一个元素。

将它们并排放置(或者甚至更好地嵌套它们并使外部成为label所以它可以用于点击),并仅为input设置正确的元素。

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

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;
}

演示 http://jsfiddle.net/gaby/ahTJv/