<!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. 优秀的web前端工程师要具备什么

    优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关.在任何情况下,前端工程师至少都要满足下列四类客户的需求. 产品经理--这些是负责策划应用程序的一群人.他们能够想象出怎样通过 ...

  2. [ios]离屏渲染优化

    原文链接:https://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=2709544818&idx=1&sn=62d0d2e9a ...

  3. 每日一九度之 题目1031：xxx定律

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6870 解决:4302 题目描述:     对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数 ...

  4. ［转］UIApplicationDelegate分析小结

    转载地址:http://www.apkbus.com/android-131646-1-1.html 我们开发出来的运行在iOS平台上的应用程序都有一个UIApplication类的对象.1.是iOS ...

  5. SDUT 2408:Pick apples

    Pick apples Time Limit: 1000MS Memory limit: 165536K 题目描述 Once ago, there is a mystery yard which on ...

  6. UVa(247)，Floyd做传递闭包

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  7. Poj(1469)，二分图最大匹配

    题目链接:http://poj.org/problem?id=1469 COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  8. eclipse 下调整jdk和tomcat的jvm参数

    eclipse 下调试和运行,往往会出现调整java.lang.OutOfMemoryError: Java heap space  产生的原因我猜测是使用了maven,subversion,myla ...

  9. 显示实时日期时间（html+js）

    <!DOCTYPE><html> <head> <title> New Document </title> <meta name=&q ...

  10. RS485模块(485与TTL信号的转换)

    1 综述 MAX3483, MAX3485, MAX3486, MAX3488, MAX3490以及MAX3491是用于RS-485与RS-422通信的3.3V,低功耗收发器,每个器件中都具有一个驱动 ...