自定义下拉框样式兼容IE8

使用纯CSS修改下拉框样式在IE8下，

select::-ms-expand { display: none; }

这个是没有效果的，无法隐藏掉右边小箭头，所以只能自己写一个下拉框，简单可复用。

css

.wy_selectActive{width: 400px;}
.wy_select{width: 400px;height: 37px;border: 2px #FFFFFF solid;padding-right: 20px;padding-left:20px;background:url(../01.png) no-repeat scroll 98% 50% transparent;float: left;
}
.wy_select_text{font-size: 22px;color: #FFFFFF;line-height: 37px;font-family: arial;
}
.wy_option{width: 440px;border: 2px #FFFFFF solid;float: left;display: none;
}
.wy_option_item{width: 440px;height: 37px;font-size: 22px;color: #FFFFFF;line-height: 37px;font-family: arial;cursor: pointer;
}
.wy_option_text{margin-left: 20px;
}
.wy_option_item_hover{background-color: #FFFFFF;color: #333333;
}

js

var wySelectDisId;
window.onload = function(){document.onclick = function(e){e = e || window.event;var dom =  e.srcElement|| e.target;if(wySelectDisId != null&& wySelectDisId != ""&&wySelectDisId !=undefined){if(dom.id != wySelectDisId && document.getElementById(wySelectDisId).style.display == "block") {document.getElementById(wySelectDisId).style.display = "none";wySelectDisId = "";}}}/*ie8下没有classlist*/if (!("classList" in document.documentElement)) {Object.defineProperty(window.Element.prototype, 'classList', {get: function () {var self = thisfunction update(fn) {return function () {var className = self.className.replace(/^\s+|\s+$/g, ''),valArr = argumentsreturn fn(className, valArr)}}function add_rmv (className, valArr, tag) {for (var i in valArr) {if(typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')var temp = valArr[i]var flag = !!~className.search(new RegExp('(\\s+)?'+temp+'(\\s+)?'))if (tag === 1) {!flag ? className += ' ' + temp : ''} else if (tag === 2) {flag ? className = className.replace(new RegExp('(\\s+)?'+temp),'') : ''}}self.className = classNamereturn tag}return {add: update(function (className, valArr) {add_rmv(className, valArr, 1)}),remove: update(function (className, valArr) {add_rmv(className, valArr, 2)}),toggle: function (value) {if(typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")if (arguments.length === 1) {this.contains(value) ? this.remove(value) : this.add(value)return}!arguments[1] ? this.remove(value) : this.add(value)},contains: update(function (className, valArr) {if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return falsereturn !!~className.search(new RegExp(valArr[0]))}),item: function (index) {typeof index === 'string' ? index = parseInt(index) : ''if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")var claArr = self.className.replace(/^\s+|\s+$/, '').split(/\s+/)var len = claArr.lengthif (index < 0 || index >= len) return nullreturn claArr[index]}}}})}}function wySelectClick(Id,e){document.getElementById(Id).style.display = "block";wySelectDisId = Id;e = e||window.event;if(+'\v1') {e.stopPropagation();} else  {e.cancelBubble = true;}}function wyOptionItemAddhover(Dom){document.getElementById("wy_select_test").children[0].innerHTML =    Dom.children[0].innerHTML;     Dom.classList.add("wy_option_item_hover");}function wyOptionItemRemovehover(Dom){Dom.classList.remove("wy_option_item_hover");}

html

        <div class="wy_selectActive" ><div class="wy_select" id="wy_select_test"    onclick="wySelectClick('wy_option_test')"  ><div class="wy_select_text">测试文字</div></div><div class="wy_option" id="wy_option_test" ><div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)"><div class="wy_option_text">测试文字1</div></div><div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)"><div class="wy_option_text">测试文字2</div></div><div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)"><div class="wy_option_text">测试文字3</div></div><div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)"><div class="wy_option_text">测试文字4</div></div></div></div>

如果classList不生效的话，还有个更原始的方法

function wyOptionItemAddhover(Dom){document.getElementById("wy_select_test_default").children[0].innerHTML = Dom.children[0].innerHTML;// Dom.classList.add("wy_option_item_hover");Dom.className = Dom.className +" wy_option_item_hover";}function wyOptionItemRemovehover(Dom){// Dom.classList.remove("wy_option_item_hover");Dom.className = Dom.className.replace(/(^|\s+)wy_option_item_hover(?=$|\s+)/,"");}

自定义下拉框样式兼容IE8相关推荐

css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
自定义下拉框样式，利用prototype制作
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script&g ...
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
uniapp 自定义下拉框
uniapp 自定义下拉框根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master 自己加了一层封装可以进行切换选择下拉内容模板 ...
文本域自定义下拉框支持模糊检索关键字高亮上下选择
转载自:文本域自定义下拉框支持模糊检索关键字高亮上下选择一.需求需要创建一个常见问题库,填写存在问题时可以下拉选择,可以模糊搜索,也可以手写.如果选择了问题库中的内容,自动填充内容到存在问 ...
winform 下拉框（自定义下拉框控件）
项目中遇到需要下拉框列表内容为线类型或点类型图形的需求,想到可以使用手绘线条和图形的方式来实现下拉列表内容自定义,记录下来供大家参考学习之用. 在项目中添加一个组件添加完之后会显示如下设计界面这里 ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...

自定义下拉框样式兼容IE8

css

js

html

自定义下拉框样式兼容IE8相关推荐

最新文章

热门文章