input输入框中嵌入无法删除的字符

某些情况下,需要实现以下效果(虽然很丑,个人),在输入框内,有几个提醒输入内容的字符串,它们是无法被删除的,效果如图:

2016-08-01_212306

实现以上效果,可以将your name:这些字符直接移动到input标签内,照成在input元素内部的假象。然后对input标签设置内边距,使得光标无法移动到冒号的左侧,代码实现如下:

<p>
    <label style="margin-right: -80px;margin-left: 2px;position: absolute;">your name:</label>
    <input style="padding-left: 80px;" type="text" />
</p>

这样就能实现以上的现象(可以兼容至IE7)。

当然,不要写行内样式,而应该用内联样式。

 

发表评论