css - CSS：如何制作输入文本边框以覆盖其周围的文本？

Question

我想在一个简单的文本输入表单旁边混合一个静态值。所以它看起来像，例如：[static]What do you think about[/static] [user info]...[/userinfo]。我想出了这个：

        <p style="display:inline;">What Is It Like To Be</p>

        <div>
            <input name="post_title" type="text" id="topic"  class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
        </div>

所以，我确实得到了与输入表单内联的静态“前缀”，但我想让静态文本看起来“像”它是表单的一部分。就像一个静态的“占位符”标签。

多谢你们 ：）

Answer 1

你可以尝试这样的事情：

HTML

<label class="input-stretch">prefix_<input type="text" /></label>​

CSS

.input-stretch {
 border: 1px solid #222;
 padding: 0.1em;    
}
.input-stretch input {
 border: none;
 outline: none !important;    
}
​

基本上删除输入边框和轮廓，然后将一个添加到标签或您想要包装它的任何其他元素。

outline: none !important;可能还需要应用于活动/焦点状态，iirc chrome 给它一些漂亮的蓝色轮廓？

演示