jQuery下拉美化搜索表单效果代码分享

本文实例讲述了jQuery下拉美化搜索表单效果。分享给大家供大家参考。具体如下：JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单，样式已写好，需要的朋友改一下就可以用了。运行效果图： - 查看效果-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jQuery下拉美化搜索表单效果代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery下拉美化搜索表单样式代码/title link href=' CSS/base。' CSS '类型=' text/CSS ' rel='样式表/style type=' text/CSS '/* search */.搜索{ border:2px实心# f 58400 height :35 pxmargin 336040 px auto 0 auto宽度宽度：525px}。搜索选择{ display:none}。搜索select _ box { font-size :12 px颜色： # 999999宽度宽度：100像素线高：35 pxfloat:left位置：相对；}.搜索select _ show box { height :35 px；背景： URL(图片/search _ ico。png)无重复80px中心；文本缩进：1.5 em}.搜索选择显示框。活动{背景： URL(图像/搜索_ ico _ hover。png)无重复80px中心；}.搜索选择_ option {边框：2 px实心# f 58400边框-top :无；display : none left :-2px；top:35px位置：绝对；z索引：99;背景# fff}。搜索选择选项Li { text-缩进：1.5 em宽度：90 px光标：指针指针；}.搜索选择选项李。选中{底色： # F3F 3；color: # 999}。搜索选择选项李。悬停{背景： # BEBEBEcolor: # fff}。搜索input.inp_srh，搜索输入。BTN _ srh {边界：无；背景：无；高度：35px线高：35 pxfloat:left} .搜索输入。InP _ srh {大纲ne :无；宽度宽度：365px}。搜索输入。BTN _ srh {背景： # f 58400颜色： # FFF；字体系列： '微软雅黑；font-size :15 px宽度：60 px}/style/head dydiv class=' search radius 6 ' form name=' search form ' method=' post ' action='/e/search/index。PHP ' input name=' ecmsfrom ' type=' hidden ' value=' 9 ' input type=' hidden ' name=' show ' value=' title，new text ' select name=' class id ' id=' choose '选项值=' 0 '搜索全部/option选项值='1 '新闻中心/option选项值='4 '技术文档/option选项值='22 '下载中心/option/select input class=' InP _ srh ' name=' keyboard ' placeholder='请输入您要搜索的作品输入类='btn_srh '类型='提交'名称='提交'值='搜索/form/div脚本类型=' text/JavaScript ' src=' http : js/jquery-1。8 .3 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。选择。js '/script div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div/body/html以上就是为大家分享的jQuery下拉美化搜索表单样式代码，希望大家可以喜欢。