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 ...
随机推荐
- C# 线程池执行操作例子
public partial class Form1 : Form { CountdownEvent hander = ); public static object lock_action = ne ...
- 面试的角度诠释Java工程师（一）
前言: 我相信每一个程序员都是为了生活而努力着的.很多人因为兴趣,从此踏上了这条‘烧脑大行动’的金桥:也有很多人因为梦想和执着,奋不顾身融入这个职业:还有很多人因为被现实逼得太无奈,不得不为自己.为家 ...
- 设置时间同步（Linux,Solaris）
经过网上各种搜索,将LINUX平台及solaris平台的时间同步整理如下: 主机情况:应用:2台LINUX服务器 redhat 5.5 内网数据库:2台Solaris服务器 Solaris 10 内网 ...
- JAVA构造方法与方法是啥意思，方法重载方法覆盖俗谈
构造函数跟构造方法是一样的,只是称呼不同; C语言里叫函数,Java里叫方法. 成员方法必须有返回类型即使是没有返回,也要写上void 构造方法没有返回类型,而且和类名一样!一个类里面,一看就知道了譬 ...
- 如何在Sql Server中读取最近一段时间的记录,比如取最近3天的或最近3个月的记录。
如何在Sql Server中读取最近一段时间的记录,比如取最近3天的或最近3个月的记录. 主要用到DATEADD函数,下面是详细语句 取最近3天 select * from 表名where rq> ...
- LinuxMint下的Orionode源码安装
1. Orionode介绍 Eclipse-orion是Eclipse项目下面的一个子项目,orion是一个在在线版的代码编辑环境.其介绍参考http://wiki.eclipse.org/Orion ...
- Java开发者需要学习的移动开发编程语言
编程语言(programming language),是用来定义计算机程序的形式语言.它是一种被标准化的交流技巧,用来向计算机发出指令.一种计算机语言让程序员能够准确地定义计算机所需要使用的数据,并精 ...
- 源码分析三(Vector与ArrayList的区别)
前面讨论过ArrayList与LinkedList的区别,ArrayList的底层数据结构是数组Object[],而LinkedList底层维护 的是一个链表Entry,所以对于查询,肯定是Array ...
- Linux Device Tree
原创博文,转载请标明出处--周学伟 http://www.cnblogs.com/zxouxuewei/ 设备树使用手册 基本数据格式 设备树是一个包含节点和属性的简单树状结构.属性就是键-值对,而 ...
- 2、一、Introduction(入门)：1、Application Fundamentals(应用程序基础)
一.Introduction(入门) 1.Application Fundamentals(应用程序基础) Android apps are written in the Java programmi ...