自定义输入文本框

Question

您好我想制作一个像这个图像的自定义输入文本框：

我搜索了很多文章，但没有发现任何事情，所以请帮助我

Answer 1

您可以使用这个小而简单的jquery在输入后添加元素：

$(".input").after("<span></span>");

然后你只需像在 FIDDLE

中那样设置样式

编辑：更新小提琴将元素置于输入下并稍微向左和向左移动，以便即使输入具有背景颜色也可以看到

Answer 2

这不是一个新的答案。但对@ alvaro-menéndez的回答进行了一些修改，使其更加紧凑和通用。

div {
    position:relative;
    display:inline-block;
    margin:50px;
}
input[type="text"] {
    width:300px;
    padding:10px;
    outline:0;
    border:0;
    background-color: #eee;
}
.preinput {
    position:absolute; 
    z-index:-1;
    display:block;
    bottom:-1px;
    left:-1px;
    border-bottom:1px solid #999;
    border-right:1px solid #999;
    border-left:1px solid #999;
    width:100%;
    height:20px;
    
}

<div>
    <span class="preinput"></span>
    <input type="text" placeholder="Search" />
</div>

Answer 3

您可以在输入中使用css背景图像。为您使用占位符属性＆＃34;搜索＆＃34;。

HTML

<input type="search" placeholder="Search" />

CSS

input[type="search"]{
  background:url(your_image_path) left bottom no-repeat;
}