自定义输入文本框

嗨，我想打这样的形象自定义输入文本框：自定义输入文本框

enter image description here

我搜索到很多文章，但没有发现任何要做到这一点，请帮助我

来源

2015-04-01 Lee

输入类型的搜索是CSS。你到目前为止尝试了什么？ – progsource 2015-04-01 06:47:45

我不能使那个奇怪的边框 – Lee 2015-04-01 06:51:14

边框底部1px然后你可以使用：之后和：在选择器之前，使垂直边框 – progsource 2015-04-01 06:53:06

这不是一个新的答案可见。但对@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>

来源

2015-04-01 10:00:48 niyasc

谢谢！有用！ – Lee 2015-04-02 11:53:29

你可以只需在你的输入中使用一个CSS背景图像。为您“搜索”使用占位符属性。

HTML

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

CSS

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

来源

2015-04-01 06:53:52

你可以使用这个小而简单的jQuery你输入后，添加元素：

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

，然后你只需要风格它就像在这FIDDLE

编辑：更新小提琴把元素的输入之下，稍微动一下底部和左侧所以这将是即使输入具有背景色

来源

2015-04-01 09:42:42

自定义输入文本框

回答

相关问题