最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8。

经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack;

在chrome和FF下隐藏默认样式,显示css自定义样式,在ie下隐藏自定义样式,显示默认样式。

DOM代码如下:

<select name="">
<option value=""></option>
</select>  

CSS样式如下:

    	select{
width: 100px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("drag.png");
background-position: right center;
padding-right: 0 \9;
background: none \9;
}

  喜欢请点击右下角推荐,转载请标明出处。

通过css属性hack完成select样式美化,并兼容IE的更多相关文章

  1. select样式美化(简单实用)

    美化select,可以实用一个a标签将select嵌套进去,然后将<a>相对定位,在将select绝对定位,美化<a>即可 文件下载链接:https://i.cnblogs.c ...

  2. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  3. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  4. HTTP协议的请求与响应和CSS属性和定位

    HTTP协议的请求与响应和CSS属性和定位 一.HTTP协议 1.1 HTTP定义 HTTP(Hypertext Transport Protocol),超文本传输协议. 一种详细规定了浏览器和web ...

  5. css中hack是什么

    css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...

  6. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  7. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  8. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

随机推荐

  1. Python奇思妙想(胡思乱想)

    1.一道简单习题引发的思考深坑(通过globals及字典推导式获取类实例化了哪些对象) 初衷就是为了打印如下的信息: 小明,10岁,男,最爱大保健小明,10岁,男,开车去东北小明,10岁,男,最爱大保 ...

  2. 界面编程之QT绘图和绘图设备20180728

    /*******************************************************************************************/ 一.绘图 整 ...

  3. 界面编程之QT的基本介绍与使用20180722

    /*******************************************************************************************/ 一.qt介绍 ...

  4. python实现windows Service服务程序

    python实现windows Service服务程序 win32serviceutil.ServiceFramework是封装得很好的Windows服务框架,本文通过继承它来实现. 通过SvcDoR ...

  5. ELKStack-生产案例项目实战(十一)

    ELKStack-生产案例项目实战 1.收集ES和apache日志,入redis input { file { path => "/etc/httpd/logs/access_log& ...

  6. 51Nod 1684 子集价值 (平方和去括号技巧)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1684 题意: 新建一个位运算,求所有子集通过这个位运算后的答案的平方和是 ...

  7. jquery或者js对html控件的处理汇总

    1.下拉列表select的处理 a).后台通过jquery获取的json数据对下拉列表select的赋值操作: html页面:<select name="gameserverlist& ...

  8. 数链剖分(Housewife Wind )

     题目链接:https://vjudge.net/contest/279350#problem/B 题目大意:给你n,q,s.n指的是有n个点,q代表有q次询问,s代表的是起点.然后接下来会有n-1条 ...

  9. websocket知识简单总结!

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. 【Python】CVE-2017-10271批量自查POC(Weblogic RCE)

    1.说明 看到大家对weblogic漏洞这么热衷,于是也看看这个漏洞的测试方式. 找了几个安全研究员的博客分析,经过几天的摸索大体清楚漏洞由XMLDecoder的反序列化产生. 漏洞最早4月份被发现, ...