纯css样式改变select选择框的默认样式(改变默认箭头)
时间:2017-10-23
最近在写前端代码时,需要实现一个美观select选择框(默认选择框会有箭头),但是不能使用Js来实现,要使用纯css样式来实现,该如何编写css代码才能使select选择框的样式兼容主流浏览器呢?(如Internet Explorer,火狐苹果浏览器等),具体实现方法请看下文。
实现方法一:使用appearance: none属性
源码如下:
<style>
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background:none\9;
padding: 5px\9;
}
}
</style>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
第二种方法:为select元素设置宽度并使用overflow:hidden
以隐藏默认箭头
代码如下:
<style>
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
</style>
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
方法三:使用css pointer-events属性
代码如下:
<style>
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height:30px;
width: 150px;
padding: 2px 10px 2px 2px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) {
.notIE .fancyArrow
{
display:none;
}
}
</style>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
- #15. 钻石
- P1328 生活大爆炸版石头剪刀布
- ASP.NET MVC 5 Authentication Breakdown
- jquery easyui datagrid mvc server端分页排序筛选的实现
- 左手用R右手Python系列——使用多进程进行任务处理
- 2017.9.17校内noip模拟赛解题报告
- MySQL基础入门——MySQL与R语言、Python交互
- BizTalk Orchestration execute Flat file disassembler ReceivePipeline
- MySQL基础入门系列之——字符与日期数据处理
- P2038 无线网络发射器选址
- ggplot2双坐标轴的解决方案
- Modifying namespace in XML document programmatically
- ggplot2学习笔记——图例系统及其调整函数
- 一款脑洞大开的表格可视化神器
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python 爬虫(七):pyspider 使用
- 你的童年有俄罗斯方块吗?教你用 Python 实现俄罗斯方块!
- Python 基础(七):字典与集合
- 5 分钟教你用 Python 实现贪吃蛇!
- Python 基础(八):与时间相关的模块
- 用 Python 实现一场环保无污染的烟花秀
- Python 基础(九):函数
- Python 基础(十二):文件基本操作
- Python 基础(十三):os 模块
- Python 基础(十四):错误和异常
- Python 基础(十五):枚举
- 一个老程序员的30年生涯回顾
- 经典 90 坦克大战 Python 版实现(支持单双人模式)
- Python 基础(十六):迭代器与生成器
- MySQL information_schema详解 COLUMNS