最近在重构时遇到了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. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  2. 线段树区间更新 lazy

    1. hdu1698 http://acm.hdu.edu.cn/showproblem.php?pid=1698 /* x y k x~y的值变为k */ #include <cstdio&g ...

  3. 虚拟机中liunx安装教程

    目标:在Linux服务器上部署Java开发的网站  工具 VirtualBox-4.3.8:下载后安装. linux系统镜像: Centos国内镜像文件下载地址: http://centos.ustc ...

  4. Maven的国内镜像(解决jar下载过慢)

    Maven简介 maven作为一个项目管理工具确实非常好用,结果在使用时候,你会发现下载jar速度不如自己在网上下载.之前oschina的中央仓库可用,现在oschina的maven服务器关了,只能拿 ...

  5. bzoj千题计划265:bzoj4873: [六省联考2017]寿司餐厅

    http://www.lydsy.com/JudgeOnline/problem.php?id=4873 选a必选b,a依赖于b 最大权闭合子图模型 构图: 1.源点 向 正美味度区间 连 流量为 美 ...

  6. CSS规范 - 优化方案--(来自网易)

    值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...

  7. 一些js的小技巧

    这里收集了一些编码上的小技巧,大家可以学习学习. 1.浮点转整型 使用|0快速转换 var a=(12.002)|0;//12 使用~~快速转换 ~取反运算符,2=0010,~2=1101,因为第一位 ...

  8. javascript 简单工厂模式

    var Bicycle = new Interface("Bicycle",["assemble","wash","ride&qu ...

  9. (FFT) A * B Problem Plus

    题目链接:https://cn.vjudge.net/contest/280041#problem/F 题目大意:给你两个数,求这俩数相乘的结果.(长度最长5000) 具体思路:硬算肯定是不行的,比如 ...

  10. linux笔记_day11_shell编程

    1.条件测试类型: 整数测试 字符测试 文件测试 条件测试的表达式: [ expression ] 必须有空格 [[ expression ]] test expression 整数比较 : -eq  ...