通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了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的更多相关文章
- select样式美化(简单实用)
美化select,可以实用一个a标签将select嵌套进去,然后将<a>相对定位,在将select绝对定位,美化<a>即可 文件下载链接:https://i.cnblogs.c ...
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...
- HTTP协议的请求与响应和CSS属性和定位
HTTP协议的请求与响应和CSS属性和定位 一.HTTP协议 1.1 HTTP定义 HTTP(Hypertext Transport Protocol),超文本传输协议. 一种详细规定了浏览器和web ...
- css中hack是什么
css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
随机推荐
- 在Linux中以普通用户开机自动运行脚本程序
测试环境:CentOS6.5 管理员:root 普通用户:test1 实现目标:在Linux启动时,以普通用户test1自动运行位于根目录下的脚本程序test.py,该程序会在每次执行时自动向本地日志 ...
- hive安装笔记
http://note.youdao.com/noteshare?id=bfbe59aef4ef7c3502975d3d575239e1
- php错误日志
php错误日志 /usr/local/php/var/log/php-fpm.log」—————————
- Hadoop基础-Map端链式编程之MapReduce统计TopN示例
Hadoop基础-Map端链式编程之MapReduce统计TopN示例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.项目需求 对“temp.txt”中的数据进行分析,统计出各 ...
- Java基础-处理json字符串解析案例
Java基础-处理json字符串解析案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名开发人员,想必大家或多或少都有接触到XML文件,XML全称为“extensible ...
- 了解Linux操作系统的引导过程
原文地址:http://os.51cto.com/art/200706/49690.htm 1.简介 Linux启动过程指的是从加电到看到shell提示的这一段时间. Linux启动的过程可以大概分为 ...
- 洛谷 P1609 最小回文数 题解
这题其实并不难,重点在你对回文数的了解,根本就不需要高精度. 打个比方: 对于一个形如 ABCDEFGH 的整数 有且仅有一个比它大的最小回文数 有且仅有一个比它小的最大回文数 而整数 ABCDDCB ...
- centos7,php7 安装mysqli扩展
首先安装MySQL https://www.cnblogs.com/manzb/p/9560403.html php7安装后没有安装mysqli扩展的话: 安装mysqli扩展 1.到php文件e ...
- Python 入门基础9 --函数基础2 实参与形参
今日内容: 一.函数参数 1.形参与实参定义 2.实参分类 3.形参分类 4.可变参数的整体使用 一.形参与实参定义 def fn(参数们): pass 1.1 形参 定义函数,在括号内声明的变量名, ...
- Opencv学习笔记——release和debug两个模式的运行问题
本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 作者:晨凫 ...