css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式:
html代码:
<div>
<select name="">
<option value="apple">苹果</option>
<option value="grape">葡萄</option>
</select>
</div>
给select添加父元素div目的是为了,用div的样式覆盖住select样式。
css代码:
div{
//用div的样式代替select的样式
width: 200px;
height: 40px;
border-radius: 5px;
//盒子阴影修饰作用,自己随意
box-shadow: 0 0 5px #ccc;
position: relative;
}
select{
//清除select的边框样式
border: none;
//清除select聚焦时候的边框颜色
outline: none;
//将select的宽高等于div的宽高
width: 100%;
height: 40px;
line-height: 40px;
//隐藏select的下拉图标
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
//通过padding-left的值让文字居中
padding-left: 60px;
}
//使用伪类给select添加自己想用的图标
div:after{
content: "";
width: 14px;
height: 8px;
background: url(img/xiala.png) no-repeat center;
//通过定位将图标放在合适的位置
position: absolute;
right: 20px;
top: 45%;
//给自定义的图标实现点击下来功能
pointer-events: none;
}
css修改select下拉列表的默认样式的更多相关文章
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- 纯css修改复选框默认样式
input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- 如何修改select标签的默认下拉箭头样式?
对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式.我思考和尝试了许多方法,最终得到一种 ...
随机推荐
- gh-ost和pt-osc性能对比
haughty_xiao 基于MySQL row格式的复制现在趋于主流,因此可以使用此格式的binlog来跟踪改变而不是触发器.与percona toolkit的pt-online-schem ...
- 设置泛域名和设置IIS下面不同网站通过不同域名公用80端口的操作指引
原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetail.aspx?id=4be204ca-249b- ...
- mysql数据导入导出与数据表优化
一.数据导入 mysqlimport -uroot oa d:/aa.txt --fields-terminated-by=, --fields-optionally-enclosed-by= --l ...
- 阿里八八Alpha阶段Scrum(7/12)
今日进度 叶文滔: Andriod Studio新版打开旧版项目存在兼容性问题,仍在寻求解决办法 王国超: 今天还是在调bug,真机运行总是闪退 俞鋆: 正在学习api制作和相关的文档编写,研究了一些 ...
- 1.数据结构&算法的引言+时间复杂度
一.什么是计算机科学? 首先明确的一点就是计算机科学不仅仅是对计算机的研究,虽然计算机在科学发展的过程中发挥了重大的作用,但是它只是一个工具,一个没有灵魂的工具而已.所谓的计算机科学实际上是对问题.解 ...
- JS内置对象-String对象、Date日期对象、Array数组对象、Math对象
一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...
- 2-7 R语言基础 数据框
#数据框 > df <- data.frame(id=c(1,2,3,4),name=c("a","b","c","d ...
- C 语言之预处理 ---------文件包括
文件包括是C预处理程序的还有一个重要功能. 文件包括命令行的一般形式为: #include"文件名称" 在前面我们已多次用此命令包括过库函数的头文件. 比如: #include&q ...
- BZOJ3632:外太空旅行(最大团,DFS)
Description 在人类的触角伸向银河系的边缘之际,普通人上太空旅行已经变得稀松平常了.某理科试验班有n个人,现在班主任要从中选出尽量多的人去参加一次太空旅行活动. 可是n名同学并不是和平相处的 ...
- Linux核心-hc课堂笔记
windows系统:分区 linux系统:树形结构 <鸟哥的私房菜>关于分区.linux命令.基础篇 服务器篇 关于文件夹: /boot 引导分区,操作系统启动时要到该目录下 ...