<!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. mysqlbinlog抽取二进制日志中某库某表的日志

    1.先使用myqlbinlog命令把整个库的二进制日志抽取出来 mysqlbinlog --database=db_name mysql-bin.xxxxxx > db_name.sql 2.然 ...

  2. Serializable接口使用纪实

    这两天依领导要求使用sonar工具测试了一下项目代码,其中有一个问题是 而这个类的结构大概是这样的: public class Demo<T> implements Serializabl ...

  3. 如何在plSql查询数据查出的数据可编辑

    最近开发项目时要经常自己造数据,遇到好多查询出数据时要进行修改.上网查询资料 总结如下: plSql允许查询数据可以编辑的条件是必须查询出rowid 在某个表上点击query data 出现的sql语 ...

  4. hbase 停止regionserver

    每个regionserver节点可以自由启动或停止,可以不随hbase整体一起. 停止后regionserver上的数据会被移到其他regionserver上,不影响hbase的使用.   停止reg ...

  5. Android 自定义ScrollView ListView 体验各种纵向滑动的需求

      分类: [android 进阶之路]2014-08-31 12:59 6190人阅读 评论(10) 收藏 举报 Android自定义ScrollView纵向拖动     转载请标明出处:http: ...

  6. windows上安装apache python mod_python

    综述:   windows上安装apache python mod_python的例子.教程甚至图解都不少:但作为新手还是会出错,而且一时无法快速排解. 在此笔者将根据自己的实践经验,给出几个需要注意 ...

  7. htmlnav

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Unity-Animator深入系列---StateMachineBehaviour状态机脚本学习

    回到 Animator深入系列总目录 首先这个脚本必须继承自StateMachineBehaviour public class MySMB : StateMachineBehaviour { pub ...

  9. iOS中3种正则表达式的使用与比较

    正则表达式在用户注册和登录中应用很广,通过正则表达式可以判断用户输入的数据正确与否. 在iOS4.0以前开发者一般是通过谓词(NSPredicate)和加入正则表达式的第三方库(如:RegexKitL ...

  10. zh-cn en-uk、zh-tw表示语言（文化）代码与国家地区对照表（最全的各国地区对照表）

    af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...