Question

我想在简单的文本输入表单旁边混合一个静态值。所以它看起来像，例如： [静态]您如何看待[/ static] [用户信息] ... [/ 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给它一些漂亮的蓝色轮廓？

DEMO

CSS：如何使输入文本边框覆盖它周围的文字？

1 个答案: