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

Question

最近，我访问了一个壁纸共享网站 wallbase 。我注意到的第一件事是搜索框。文本输入框有一个很好的css渐变样式。但更有趣的是它的文本输入插入符号的行为。它是一个白色，明亮，有光泽的。此外，输入文本的行为也是自定义的。

我不知道它是如何实现的，我认为CSS和JavaScript一起可能是可能的。有人可以解释它的实现方式吗？我附上以下截图：

Answer 1

此插件可以帮助您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>

  

＆＃34;在所有输入父项上调用.fancyInput（）函数。使用此示例代码，确保每个输入都包含在div中。＆＃34;

Answer 2

你可以用css做所有事情，像这样： http://jsfiddle.net/4QFpg/ 你可以在这里做crossborwser梯度：  http://www.colorzilla.com/gradient-editor/ 看一下属性边框，背景和边界半径

祝你好运 css中的pd查看属性或类的输入

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;     填充：6px;      }