在网页制作中，input框可是个关键角色它给咱们提供了输入信息的途径。所以它长什么样真的直接影响着我们的体验感！借助强大的JavaScript工具jQuery可得劲儿地改变下input框的模样，让它看上去更美，用起来更顺手！接下来，就让我教你几个简单好用的jQuery技能，瞬间提升input框的颜值！
一、基础样式设置
做网页，啥都不干就加个基础样式，立马就让界面炫起来；随便动动手，输入框也能变成美美的。
给你透露个秘密，输入框的颜色变来变去超简单！学会这行代码，自定义风格随便造！
javascript 咱就把input的背景色换个浅灰，也就是"#f2f2f2"那种喽。
接着，我们可以调整边框颜色，让input框更具边界感：
$('input').css('background-color', '#f6f6f6');
把输入框的边框颜色改变成米色。
输入框里的字颜色也别忘了看。想要换成自己喜欢的？以下代码可以轻松解决：
给所有的输入框换个深灰色的颜色#333333 ！
$('input').css('border-color', '#ccc');
想让输入框可爱？加个小圆圈轻松搞定！
把所有的输入框边框弄成圆角，像素是5。
二、高级样式设置
不仅仅是基本的格式，其实你还能通过一些特殊的设置来让你的网页更有个性、更帅气！
$('input').css('color', '#666');
想要为input框添加阴影效果，可以使用如下代码：
给每个“input”元素添个小尾巴，就像这样：2px 2px 5px #888888
如果想要为input框添加渐变填充效果，可以尝试以下代码：
其实很简单，我们只需要在每个输入框上添加一张叫做”线性渐变背景图片”的东西，让他的颜色从红变蓝（从右至左），就像慢慢滑动那样，效果酷炫！具体地说，就是让颜色从那个红得发烫的#ff7e5f向有点清凉的#feb47b靠近，也是从右到左，让人感觉就像是有一条线在移动。
你知道输入框怎么调整大小吗？撒玩意儿，超简单！就这么几行代码搞定：
$('input').css('border-radius', '5px');
给所有的<input>标签把宽度设成200像素吧!
输入框的高度变成了 30 像素。
给input框加个小动画，让你鼠标停在哪儿就能看见反馈！
$(‘input’).hover(function(){
把边框颜色换成#555555，搞定！
$('input').css('box-shadow', '0 0 4px #999');
}, function(){
换个#999999的边框颜色试试。
});
$('input').css('background-image', 'linear-gradient(to bottom, #fff, #f9f9f9)');
此外，修改文字字体和大小也是影响用户体验的重要因素：
点左下角“输入”找“字体”，找到第三个叫“楷体”的，选它就行！现在就能换成喜欢的Arial字体。
把输入框的字体大小改成14像素，就这么简单！
三、实现搜索框动态效果
对，别小瞧在搜索框加点jQuery动态效果~这样做立马让页面鲜活起来，更有吸引力！
$('input').css('width', '200px');
$('input').css('height', '30px');
HTML代码如下：
“`html
jQuery代码如下：
$('input').hover(function(){
$(this).css('border-color', '#666');
}, function(){
$(this).css('border-color', '#ccc');
});
当你在搜索栏打字的时候，它会自动触发这个事件处理函数哦～
if($(this).val()!==”){
$(this).css({
背景颜色改成了黄色！
‘color’:’#333333′
$('input').css('font-family', 'Arial');
$('input').css('font-size', '14px');
});
} else {
‘background-color’:”,
‘color’:”
}
例如，如果框里面有些东西了，那咱可以给它换个好看点儿的颜色；要是啥也没有的话，就还是用原来那个呗，不改变。
说实在的，学点儿 jQuery 来处理 input 框那真是小菜一碟！学会这几个案例以后，你就能玩些特别酷炫的东西，让你的网站更耀眼！
网页设计不能忽略小细节，那样给人感觉就像吃了苍蝇一样难受。想要看着顺眼、用着舒心且独特点十足的输入框其实不只限于表格。而且，这玩意儿还能帮您和小伙伴们更好地沟通。希望大家看过这份攻略后，网页能做得更有魅力点儿、同样也更加专业~
。
评论0