css - 为输入字段的文本添加边框

Question

我正在尝试获取以下内容以在文本本身（而不是输入窗口）下方显示带有边框的“搜索”一词。我尝试使用placeholder此处找到的 CSS How do I Addborder 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=andonblur=而不是 just placeholder=，但似乎无法弄清楚。

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

Answer 1

放一个css行：text-decoration：下划线；当它说“搜索”时，当它是其他东西时删除该样式。也许通过向输入字段添加和删除一个类（.underline）。

Answer 2

您可以使用: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;
}

Answer 3

您可以将您的输入框封装到一个 div 中，并将该 div 设置为看起来像您的输入框。然后强制输入框只显示底部边框。

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

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

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