如何使用自定义插入符号和文本行为创建输入文本字段

最近，我访问了壁纸共享网站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

如何使用自定义插入符号和文本行为创建输入文本字段

回答

相关问题