css修改select默认样式
先来看看效果图：
css：
<style media="screen">
.select_demo,
.select_list {
width: 400px;
height: 60px;
} .select_demo {
background-color: #fbe4e8;
} .select_list {
border: solid 2px #96cffd;
font-size: 30px;
padding-left: 20px;
/*很关键：将默认的select选择框样式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("chevron_down.png") no-repeat scroll right center transparent;
background-position-x: 330px;
} /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
display: none;
}
</style>
html：
<body>
<div class="select_demo">
<select class="select_list">
<option value="0">请选择</option>
<option value="1">香蕉</option>
<option value="2">火龙果</option>
<option value="3">圣女果</option>
<option value="4">南非无籽红提</option>
<option value="5">菲律宾帝皇蕉</option>
</select>
</div>
</body>
右侧图标：
也可以自己在：图标 上选择自己喜欢的图标。
css修改select默认样式的更多相关文章
- css修改滚动条默认样式
之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...
- 修改select默认样式
http://www.qkzone.com/code/2015-11-26/1.html
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- 【css】 如何修改select的样式
select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...
- css清除浏览器默认样式
css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...
- 弹窗中修改select默认值遇到的问题
弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...
- css修改placeholder的样式
css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...
- 取消select默认样式
/*清除select默认样式*/select { border: solid 1px #CACDD0; appearance:none; -moz-appearance:none; -webkit-a ...
随机推荐
- asp.net 局域网中获取 client的机器名
//获取客户端计算机名称 System.Net.IPAddress clientIP = System.Net.IPAddress.Parse(Request.UserHostAddress);//根 ...
- log4net按照不同的【LEVEL】级别输出到不同文件
Log4net按照不同级别写入多个日志文件 2012-02-08 15:06 by Fred-Xu, ... 阅读, ... 评论, 收藏, 编辑 在一个Web应用项目中,我使用了Fluent NHi ...
- Easyradius 1.699更新，增加用户设备绑定、桥接用户管理功能
最近几天,由于IDC机房设备的问题,导致OA连接3天一天挂2次,真是把我抑闷着,最事一个烦事特别多 好不容易等了一个五一假期,也不得空,把最近一些网友反馈的OA的一些功能及BUG进行修复,主要是以下几 ...
- Scala学习笔记——入门
0.在 scala> 下运行Scala程序 首先cd到.scala文件所在的目录下 scalac这个scala文件,然后import package的名字.object的名字 然后就能使用 ob ...
- flume使用之exec source收集各端数据汇总到另外一台服务器
转载:http://blog.csdn.net/liuxiao723846/article/details/78133375 一.场景一描述: 线上api接口服务通过log4j往本地磁盘上打印日志,在 ...
- IOS 应用官方接口地址
地址: http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-a ...
- Android反编译工具介绍与简单实用方法
Android反编译的目的无非就是为了看到APK的xml.资源和代码: 得到代码的方式:直接解压APK文件 --> 得到classes.dex文件 --> 使用 dex2jar class ...
- Servlet入门总结及第一个Servlet程序
目录 一了解Servlet的概念 二Servlet技术功能 三 Servlet技术特点 四 Servlet生命周期 五servlet工作过程 六 Servlet与JSP区别 七Servlet代码结构 ...
- 8 -- 深入使用Spring -- 2...3 使用@Resource配置依赖
8.2.3 使用@Resource配置依赖 @Resource 位于javax.annotation包下,是来自Java EE规范的一个Annotation,Spring直接借鉴了该Annotatio ...
- POJ 3258 River Hopscotch(二分法搜索)
Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...