手写select，解决浏览器兼容性

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 搜索条*/

    // 搜索下拉$(".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();});

手写select，解决浏览器兼容性相关推荐

怎么解决浏览器兼容性问题
怎么解决浏览器兼容性问题所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 * height: ...
解决浏览器兼容性问题面试题_如果不解决技术面试问题，就无法解决技术多样性问题。这是数据。...
解决浏览器兼容性问题面试题 by Aline Lerner 通过艾琳·勒纳(Aline Lerner) 如果不解决技术面试问题,就无法解决技术多样性问题. 这是数据. (You can't fix d ...
vue解决浏览器兼容性问题
在 vue cli2 项目中使用Vuex时,ie浏览器会出现"Vuex requires a Promise polyfill in this browser"的错误提示,这是因为 ...
解决浏览器兼容性的五大方案
浏览器兼容性涉及的内容有很多,特别是针对IE浏览器,以下整理出五种常见的浏览器兼容性解决方法. 一.样式初始化由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在 ...
如何解决浏览器兼容性问题
我只是写一写给自己长个记性和经验而已,嘿嘿. 浏览器兼容性问题是比较难解决的.主要是由浏览器内核的不同而引起的,所以对有的关键字支持不是很好. 为了应付浏览器兼容性问题,写完一个小模块的代码,就对需要 ...
CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...
KindEditor解决浏览器兼容性的问题
KindEditor的图片上传插件,对浏览器兼容性不好. 使用@ResponseBody注解返回java对象, Content-Type:application/json;charset=UTF-8 ...
CSS3解决浏览器兼容性
兼容性处理要点 1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多 ...
解决浏览器兼容性问题
不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于此,所有标记 ...

手写select，解决浏览器兼容性

手写select，解决浏览器兼容性相关推荐

最新文章

热门文章