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 ...
随机推荐
- Spring简单集成Redis
- 《经久不衰的Spring框架：@ResponseBody 中文乱码》（转）
转载自:http://www.cnblogs.com/shanrengo/p/6429291.html 问题背景 本文并不是介绍@ResponseBody注解,也不是中文乱码问题的大汇总笔记,这些网上 ...
- List&Map&Set的操作和遍历
Java的三大集合即:Set.List.Map. Set:代表无序.不可重复的集合,常用的有HashSet(哈希表实现).TreeSet(红黑树实现): List:代表有序.可以重复的集合,比较常用的 ...
- UITableView 顶部能够放大的图片
UITableView 顶部能够放大的图片 现在有挺多的应用在 UITableView 顶部加入图片,通过拖拽 UITableView 来实现图片的放大. 对比一下腾讯出品的两款App QQ:可展示更 ...
- Java学习之——JavaBeans
1.什么是JavaBeans? JavaBeans是Java语言中可以重复使用的软件组件,它们是一种特殊的Java类,将很多的对象封装到了一个对象(bean)中.特点是 可序列化, 提供无参构造器, ...
- Mongodb数据结构及与MySql对比
MySql一直是性价比最高的关系型数据库典范 MongoDB带来了关系数据库以外的NoSql体验. 让我们看一个简单的例子,我们将如何为MySQL(或任何关系数据库)和MongoDB中创建一个数据结构 ...
- 关于HTML标签嵌套的问题详解
先说基础,HTML标签有两类: 1.块级元素 div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.men ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- 5 -- Hibernate的基本用法 --2 1 Hibernate 下载和安装
1. 下载Hibernate压缩包 2. 解压:文件结构 ⊙ documentation : 该路径下存放了Hibernate的相关文档,包括Hibernate的参考文档和API文档等. ⊙ lib ...
- Jackson Gson Json.simple part 2
这篇blog介绍 Jackson 的特点和使用方法 Jackson支持三种使用方法 流API(streaming api Incremental parsing/generation) JsonPar ...