Question

我试图让以下内容显示“搜索”一词，文字本身下方有一个边框（不是输入窗口）。我尝试使用此处How do I Add border to text in inputfield中的CSS placeholder，但它不起作用。这是我的输入框（它是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/

Answer 1

放一条css行：text-decoration：underline;当它说'搜索'并删除那个样式时，它是别的东西。可能通过在输入字段中添加和删除类（.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*/
}

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

3 个答案: