将边框添加到输入字段的文本

我试图让下列内容在文本本身（不是输入窗口）下面显示带有边框的“搜索”一词。我试图使用在这里找到的CSS placeholderHow do I Add border to text in inputfield，但它不起作用。这里是我的输入框（它是WordPress的搜索框）：将边框添加到输入字段的文本

<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />

我会非常感激给谁就给谁可以给我一个修复。我知道这是因为我有onfocus=和onblur=而不是只有placeholder=，但似乎无法弄清楚。

这里是我的小提琴http://jsfiddle.net/6Gevu/14/

来源

2013-07-12 N-WS

把CSS行：文本装饰：下划线;当它说'搜索'，并删除该风格时，它是别的东西。也许通过添加和删除类（.underline）到输入字段。

来源

2013-07-12 19:17:34 Tdelang

谢谢，但我需要它是边框底部：1px固体，而不是文字装饰：下划线。我知道它的具体，但它的设计所需 –

这需要一些努力，也许这就是你要找的：http://jsfiddle.net/HR5N8/406/ – Tdelang

我不确定那会做技巧，但我感谢你的帮助。你有任何建议进一步研究，使这种情况发生？我必须依赖JavaScript吗？ –

您可以使用:after伪元素来产生一个边框，就像这样：http://jsfiddle.net/RMJWH/

.search-border { 
    position: relative; 
    display: inline-block; 
} 
.search-border:after { 
    content: "."; 
    color: transparent; 
    position: absolute; 
    bottom: 5px; 
    left: 2px; 
    width: 238px; 
    border-bottom: 2px solid #000000; 
}

来源

2013-07-12 20:20:52

但是，将底部边框添加到整个框中，我只需要文本本身的底部边框 –

只是占位符文本？还是输入文字？ –

有唯一的边界是'搜索'文本本身。所以，只需占位符文本 –

你可以附上你的输入框中输入到一个div和风格，股利看起来像你的输入框。然后强制输入框仅显示底部边框。

<div class="input-box"><input type="text" /></div> 

.input-box 
{ 
    /*your styles here*/ 
} 

input 
{ 
    border:0; 
    border-bottom:/*some value*/ 
}

来源

2013-07-12 20:35:51 Dolchio

将边框添加到输入字段的文本

回答

相关问题