最近在重构时遇到了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. 《剑指offer》— JavaScript(32)把数组排成最小的数

    把数组排成最小的数 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为3213 ...

  2. OpenStack 存储服务 Cinder存储节点部署LVM(十六)

    Cinder存储节点部署 部署在192.168.137.12主机 1.安装lvm2软件包 yum install lvm2 -y 2.启动LVM的metadata服务并且设置该服务随系统启动 syst ...

  3. Hadoop生态圈-zookeeper的API用法详解

    Hadoop生态圈-zookeeper的API用法详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.测试前准备 1>.开启集群 [yinzhengjie@s101 ~] ...

  4. Content-Type:几种常用数据编码格式

    Content-Type: 用于定义用户的浏览器或相关设备如何显示将要加载的数据,或者如何处理将要加载的数据. 内容类型,一般指网页中存在的Content-Type,Content-Type属性指定请 ...

  5. dedecms织梦让channelartlist标签支持currentstyle属性

    打开include\taglib\channelartlist.lib.php  大约93行 找到: $pv->Fields['typeurl'] = GetOneTypeUrlA($typei ...

  6. Java SpringMVC框架学习(三)springMVC的执行流程

    具体执行逻辑如下: 浏览器提交请求到中央调度器. 中央调度器将请求转给处理器映射器. 处理器映射器根据请求, 找到请求对应的处理器, 并将其封装为处理器执行链返回给中央调度器. 中央调度器根据处理器执 ...

  7. git 学习小记

    话说 git 出了已经很久了,可是我一直没用过.其实也不是没用过,只不过在 github 上下载东西那根本就不是在用 git,只是单纯的HTTP下载而已.我们公司用的是 svn,所以我只会一点点svn ...

  8. AngularJs -- 模 块

    在JavaScript中,将函数代码全部定义在全局命名空间中绝对不是什么好主意,这样做会导致冲突从而是调试变得非常困难,浪费宝贵的时间. 上一章介绍数据绑定时,就是写在全局命名空间中定义的函数. 在A ...

  9. MySQL5.6主从复制最佳实践

    MySQL5.6     主从复制的配置  环境 操作系统:CentOS-6.6-x86_64 MySQL 版本:mysql-5.6.26.tar.gz 主节点 IP:192.168.31.57    ...

  10. Zookeeper笔记之使用zk实现集群选主

    一.需求 在主从结构的集群中,我们假设硬件机器是很脆弱的,随时可能会宕机,当master挂掉之后需要从slave中选出一个节点作为新的master,使用zookeeper可以很简单的实现集群选主功能. ...