recherche

Maison >interface Web >js tutoriel >jQuery liste déroulante d'embellissement formulaire de recherche effet code Sharing_jquery

jQuery liste déroulante d'embellissement formulaire de recherche effet code Sharing_jquery

WBOY
WBOYoriginal
2016-05-16 15:42:461144parcourir

L'exemple de cet article décrit l'effet du formulaire de recherche d'embellissement déroulant jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Le code de style du formulaire de recherche d'embellissement de la liste déroulante JQuery est un formulaire qui embellit la zone déroulante. Le style a été écrit et les amis qui en ont besoin peuvent simplement le modifier et l'utiliser.
Rendu d'opération : -------------------Effet de vue-------------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet du formulaire de recherche d'embellissement déroulant jQuery partagé avec vous est le suivant 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉美化搜索表单样式代码</title>

<link href="css/base.css" type="text/css" rel="stylesheet" />

<style type="text/css">
/* search */
.search{border:2px solid #f58400;height:35px;margin:40px auto 0 auto;width:525px;}
.search select{display:none;}
.search .select_box{font-size:12px;color:#999999;width:100px;line-height:35px;float:left;position:relative;}
.search .select_showbox{height:35px;background:url(images/search_ico.png) no-repeat 80px center;text-indent:1.5em;}
.search .select_showbox.active{background:url(images/search_ico_hover.png) no-repeat 80px center;}
.search .select_option{border:2px solid #f58400;border-top:none;display:none;left:-2px;top:35px;position:absolute;z-index:99;background:#fff;}
.search .select_option li{text-indent:1.5em;width:90px;cursor:pointer;}
.search .select_option li.selected{background-color:#F3F3F3;color:#999;}
.search .select_option li.hover{background:#BEBEBE;color:#fff;}

.search input.inp_srh,.search input.btn_srh{border:none;background:none;height:35px;line-height:35px;float:left}
.search input.inp_srh{outline:none;width:365px;}
.search input.btn_srh{background:#f58400;color:#FFF;font-family:"微软雅黑";font-size:15px;width:60px;}
</style>

</head>


<body>

<div class="search radius6">
 <form name="searchform" method="post" action="/e/search/index.php">
 <input name='ecmsfrom' type='hidden' value='9'>
 <input type="hidden" name="show" value="title,newstext">
 <select name="classid" id="choose">
  <option value="0">搜索全部</option>
  <option value="1">新闻中心</option>
  <option value="4">技术文档</option>
  <option value="22">下载中心</option>
 </select> 
 <input class="inp_srh" name="keyboard" placeholder="请输入您要搜索的作品" >
 <input class="btn_srh" type="submit" name="submit" value="搜索">
 </form>
</div>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>

Ce qui précède est le code de style du formulaire de recherche d'embellissement déroulant jQuery partagé avec vous. J'espère qu'il vous plaira.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment remplir le contenu dans la liste déroulante après que jquery ait obtenu les données json en arrière-plan à l'aide d'ajax_jqueryArticle suivant：Comment remplir le contenu dans la liste déroulante après que jquery ait obtenu les données json en arrière-plan à l'aide d'ajax_jquery

Articles Liés

Voir plus