<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type= text/javascript >
var $$ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var btnSelect = $$("btn_select");
var curSelect = btnSelect.getElementsByTagName("span")[0];
var oSelect = btnSelect.getElementsByTagName("select")[0];
var aOption = btnSelect.getElementsByTagName("option");
oSelect.onchange = function () {
var text=oSelect.options[oSelect.selectedIndex].text;
curSelect.innerHTML = text;
}
}
</script>
<style type= text/css >
*{
margin: 0;
padding: 0;
}
body {
padding: 50px 50px;
}
.btn-select {
position: relative;
display: inline-block;
width: 150px;
height: 25px;
font: 14px/20px "Microsoft YaHei";
}
.btn-select .cur-select {
position: absolute;
display: block;
width: 150px;
height: 25px;
line-height: 25px;
background: url(ico-arrow.png) no-repeat 125px center;
text-indent: 10px;
border:solid #999 1px;
}
.btn-select:hover .cur-select {
/*background-color: #f90;*/
}
.btn-select select {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
opacity: 0;
filter: alpha(opacity: 0;);
font: 14px/20px "Microsoft YaHei";
}
.btn-select select option {
text-indent: 30px;
}
.btn-select select option:hover {
/*background-color: #f80;
color: #fff; */
}

.styled-select select {
width: 150px;
padding-left: 5px;
font-size: 12px;
border: 1px solid #ccc;
height: 25px;
-webkit-appearance: none; /*for chrome*/
background: url(ico-arrow.png) no-repeat right center ;
}
</style>
</head>
<body>
<form>
<a class="btn-select" id="btn_select">
<span class="cur-select">请选择</span>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>
</a>
</form>

<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>

<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
</body>
</html>

select{ 
margin: 0; 
padding: 0; 
outline: none; 
height: 25px; 
line-height: 25px; 
width: 120px; 
border: rgb(191, 204, 220) 1px solid; 
border-radius: 3px; 
display: inline-block; 
font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial"; 
background-size: 5px 5px,5px 5px,25px 25px,1px 25px; 
 
background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 
repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%); 
background-repeat: no-repeat; 
background-position: 101px 10px,106px 10px,right top,92px top; 
-webkit-appearance: none 
}

css+js实现兼容性select的样式的更多相关文章

  1. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  2. 【css】 如何修改select的样式

    select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...

  3. css自定义 range radio select的样式滑轮，按钮，选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  4. css取消input、select默认样式（手机端）

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  5. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  7. css知多少（3）——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

  8. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  9. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

随机推荐

  1. Jquery知识

    1.窗口自适应调整 (设置layout的fit属性值为true即可) //窗口自适应调整 $(function() { windowResize(); //文档载入时加载 $(window).resi ...

  2. 直接在Chrome里抓取数据

    一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...

  3. mysql之使用xtrabackup进行物理备份、恢复、在线克隆从库、在线重做主从

    注:图片来自<深入浅出MySQL 数据库开发 优化与管理维护 第2版> 物理备份和恢复 1.冷备份:停掉mysql再备份,一般很少用,因为很多应用不允许长时间停机,停机备份的可以直接CP数 ...

  4. 关于匿名类无法转换为object

    缘由,不能在Razor中使用匿名类, 先事先封装了一个方法,用于Razor给cshtml模板返回页面. 在ashx一般处理程序中,是这样调用的 匿名类的格式如下:(只看格式,不看具体内容) 调用这样 ...

  5. tar 报错gzip: stdin: not in gzip format

    今天在linux下 用tar -zxvf xxx.tar.bz2 然后就报这个错. gzip: stdin: not in gzip formattar: Child returned status ...

  6. c# ReaderWriterLock类

    先前也知道,Monitor实现的是在读写两种情况的临界区中只可以让一个线程访问,那么如果业务中存在”读取密集型“操作,就 好比数据库一样,读取的操作永远比写入的操作多.针对这种情况,我们使用Monit ...

  7. 一种奇特的DEDE隐藏后门办法

    转自:http://www.91ri.org/6462.html   一种奇特的DEDE隐藏后门办法 单位某站用的dedecms,今天被某黑阔getshell了,提交到了wooyun. 为了还原黑阔入 ...

  8. C#窗体四边框阴影效果的实现

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. javaScript动态参数

    javaScript是动态语言,那么动态参数的话也是与生俱来的, 在去取javaScript得参数用的是Arguments这个属性,去取 <script type="text/java ...

  10. maven之一——多模块项目构建

    参考这个帖子: http://www.cnblogs.com/xdp-gacl/p/4242221.html