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 ...
随机推荐
- git默认忽略文件的大小写
- 消息中间件activemq-5.13.0整合spring
首先说明这里是在qctivemq配置好并启动服务的情况下进行,请先自行配置好.也可关注我的博文(消息中间件qctivemq安全验证配置)进行配置. 1.首先看一下项目结构 2.所需jar包,这里只列出 ...
- 禁止选中文本JS
if (typeof(element.onselectstart) != "undefined") { // IE下禁止元素被选取 element.onselectstart = ...
- MongoDB 之 Capped Collection
MongoDB 支持 Capped Collection,一种固定大小的集合,当集合的大小达到指定大小时,新数据覆盖老数据,MongoDB Replica set 中的 oplog 就是 Capped ...
- Android App Crash, send email to author
http://www.iriphon.com/2011/06/23/how-do-i-get-android-crash-logs/
- PDF文件可以转换成txt文档吗
PDF是一种便携式的文件格式,传送和阅读都非常方便,是Adobe公司开发的跨平台文件格式,它无论在哪种打印机上都可以保证精确的颜色和准确的打印效果.可是有点遗憾的是PDF格式一般不能在手机上打开,或者 ...
- MathType输入框怎么调整
在用MathType编辑公式编辑器时,除了可以对MathType工具栏的显示比例进行调整以外,还可以对编辑时的输入框进行调整.这样在编辑的过程中,工具栏可以看得很清楚,同时框输入框也可以看得很清楚,这 ...
- Base64编码——学习笔记
Base64是一种编码方式. 非加密 chcp->936 编码流程: 位数不够后面补0,例中补了2个0. 末尾加=表示结束符. GB2312,有些敏感词不能显示. GBK,是GB2312升级版. ...
- Linux安装bundle
安装bundle文件的方法: cd 到文件目录再用sudo chmod +x XXXXXXX.bundle 加权限最后 ./XXXXXXXX.bundle 就行了. 第一步:sudo chmod +x ...
- PHP 数组current和next用法
1.current 当前数组 <?php $transport = array('foot', 'bike', 'car', 'plane'); $mode = current($trans ...