html

<div class="top_search"><div class="search_sel"><p class="search_sel_show">搜<span>商品</span><b></b></p><ul class="seatch_sel_list"><li>商品</li><li>店鋪</li></ul></div><div class="search_con"><input type="text" class="search_con_input" placeholder="雪紡" aria-label="雪紡" /><input type="button" value="搜索" class="search_con_btn" /></div> </div> css

/*搜索條*/ .top_search{float: left;margin-left: 230px;margin-top: 32px;height: 34px;line-height: 34px;border:1px solid #f2572c; } .top_search>div{float: left;background: #fff } .search_sel{position: relative;cursor: pointer; } .search_sel_show{padding:0 12px;color: #f2572c;position: relative;width: 55px; } .search_sel_show>b{position: absolute;top:16px;right: 10px;width: 20px;height: 10px;background:url(../../image/sprites.png) no-repeat -40px -208px; } .seatch_sel_list{position: absolute;top:35px;left:-1px;z-index: 500;width: 78px;border: 1px solid #D2D2D2;border-top: none;text-align: center;background-color: #fff;display: none; } .seatch_sel_list>li{line-height: 34px; } .search_con{position: relative; } .search_con_input{height: 30px;line-height: 30px;width: 300px;padding-right: 100px;text-indent: 8px;outline: none; } .search_con_btn{position: absolute;top:0px;right: 0px;width: 100px;height: 34px;line-height: 30px;text-align: center;color: #fff;background-color: #f2572c;font-size: 16px;outline: none;cursor: pointer; } /*end 搜索條*/

js

// 搜索下拉$(".search_sel_show").on("click",function(){var list=$(this).next(),listShow=list.css("display")if(listShow=="none"){list.slideDown();}else{list.slideUp();}});$(".seatch_sel_list").on("click","li",function(){var txt=$(this).text();$(".search_sel_show>span").text(txt);$(this).parent().slideUp();});

總結(jié)

以上是生活随笔為你收集整理的手写select，解决浏览器兼容性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。