如何使用自定義插入符號和文本行爲創建輸入文本字段

最近，我訪問了壁紙共享網站wallbase。我注意到的第一件事就是搜索框。文本輸入框有一個很好的CSS漸變樣式。但更有趣的是它的文字輸入插頁的行爲。這是一個白色，明亮，閃亮的。此外，輸入文本的行爲也是自定義的。我不知道它是如何實現的，我認爲CSS和JavaScript一起可能是可能的。有人可以解釋它的實現方式以及jsfiddle上的一個小演示嗎？我附上下面的截圖;如何使用自定義插入符號和文本行爲創建輸入文本字段

enter image description here

在此先感謝... :)

注：我標記與CSS，HTML，JavaScript和jQuery的這個問題。

來源

2014-02-07 blasteralfred Ψ

無論是JS的buttloads模仿正常的輸入，但款式應有盡有，或絕對定位的'div'覆蓋OS插入符號。 – Kroltan

這個插件可以幫助你Fancy Input – JQuery Plugin

<!-- ...previous page content... --> 
<div> 
<input type='text' > 
</div> 
<div> 
    <textarea></textarea> 
</div> 
<!-- ...some more content (hopefully)... --> 
<script> 
$('div :input').fancyInput(); 
</script>

「呼籲輸入所有父母.fancyInput（）函數。有了這個示例代碼，確保每個輸入被包裹在一個div。」

來源

2014-02-07 21:31:43 JosueMolina

你可以用CSS做的一切，就像這樣： http://jsfiddle.net/4QFpg/ 的crossborwser梯度可以DOIT這裏： http://www.colorzilla.com/gradient-editor/ 看看到屬性邊框，背景和邊框半徑

好運 PD在CSS中看看屬性或類的輸入

input[type="text"], select, textarea, .custom-text-form input[type="email"], input[type="search"], input[type="password"] {

背景：線性漸變（到底部，＃D6D1CA 0％，#FFFFFF 100％）重複滾動0 0 RGBA（0，0，0，0）; border：1px solid #FFFFFF; border-radius：8px; 顏色：＃666666; font-size：13px; margin-bottom：20px; padding：6px; }

來源

2014-02-07 21:38:29 humbert

如何使用自定義插入符號和文本行爲創建輸入文本字段

回答

相關問題