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

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

实现以上效果，可以将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）。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!