自定義輸入文本框

嗨，我想打這樣的形象自定義輸入文本框：自定義輸入文本框

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

自定義輸入文本框

回答

相關問題