CSS效果:CSS改变下拉列表select框的默认样式
2024-10-22 18:29:57
原理
原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000; /*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/
background: url("arrow.png") no-repeat right center;
padding-right: 14px;
} /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
兼容问题
IE8/9并不支持 appearance:none CSS属性,所以如果需要兼容低版本IE浏览器,我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片或者伪元素实现自定义箭头。
html代码:
<div id="parentDiv">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
css代码:
#parentDiv {
background: url('ico.png') no-repeat right center;
width: 80px;
height: 34px;
overflow: hidden;
}
#parentDiv select {
background: transparent;
border: none;
padding-left: 10px;
width: 100px;
height: 100%;
}
缺陷
下拉选项的宽度会比他的父容器宽,看上去有点不协调,就看自己的取舍问题与项目的兼容问题而定吧。
最新文章
- Linux 内核数据结构:双向链表
- 如何带领一个Android开发团队
- [maven] 使用问题及思考汇总
- jQuery Ajax之load()方法
- QT_校园导航(绘制路线已实现)_Updata_详细注释
- 推送消息 相关公司 手机端分享http://mob.com/
- 命令提示符CMD远程连接Mysql学习笔记
- [Effective Modern C++] Item 7. Distinguish between () and {} when creating objects - 辨别使用()与{}创建对象的差别
- Android - 支持不同的设备 - 支持不同的平台版本
- vconfig
- ASP.NET Core - Razor 页面简介
- F04 我的投资策略
- java中JFrame类中函数addWindowListener(new WindowAdapter)
- Android进阶:七、Retrofit2.0原理解析之最简流程【下】
- element-ui 点击获取table的行索引
- 再谈docker基本命令
- Spring boot web程序static资源放在jar外部
- 常用的评价指标:accuracy、precision、recall、F1-score、ROC-AUC、PR-AUC
- BZOJ4860 BJOI2017 树的难题 点分治、线段树合并
- SQL获取连续数字中断数字
热门文章
- swiper轮播在ie浏览器上遇到的显示问题探索
- 神经网络架构PYTORCH-前馈神经网络
- 【zookeeper】4、利用zookeeper,借助观察模式,判断服务器的上下线
- 【EF6学习笔记】(九)异步处理和存储过程
- linux 命令 — archive
- 【Apache Pulsar】Apache Pulsar单机环境及Go语言开发环境搭建
- Hibernate学习(六)———— cascade(级联)和inverse关系详解
- 消息中间件RabbitMQ(一)
- Perl处理数据(二):tr和y///
- python属性管理(1):基础