CSS：如何使输入文字边框覆盖文字？

我想混合一个简单的文本输入窗体旁边的静态值。所以它看起来像，例如： [静态]你如何看待[/静态] [用户信息] ... [/用户信息]。我已经想出了这一点：CSS：如何使输入文字边框覆盖文字？

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

所以，我得到与输入表格内联静态“前缀”，但我想，让静态文本看“喜欢”这是形式的一部分。就像一个静态的“占位符”标签。

谢谢你们:)

来源

2012-05-15 dk9

我们可以使用jQuery吗？ [text] – ShibinRagh

我不清楚你是否试图将静态文本显示在文本字段，*文本字段或其他内容的同一行上。前者可以用[几种不同的方式]完成（http://jsfiddle.net/avxFE/1/）。 – mkjeldsen

^所以我会修改我的答案，如果我离开基地：P – rlemon

你可以尝试这样的事：

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

基本上除去输入博尔der和轮廓，然后将一个添加到标签或任何其他要包装的元素。

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

DEMO

来源

2012-05-15 12:08:29 rlemon

在此期间，我发现了另一种方式来解决它，它是这样的：创建一个与“位置：相对”的集装箱股利。用“position：relative”创建2个子div。玩：边缘，顶部和左侧。但是 - 您的建议看起来更优雅，我会尽量多尝试一下，因为我有时间。感谢您的帮助:) – dk9

CSS：如何使输入文字边框覆盖文字？

回答

相关问题