css+js实现兼容性select的样式
<!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
}
相关文章
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS - 解决引入 js 文件无效的问题
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
- js+css实现骰子的随机转动
- thymeleaf引入公共css、js等
- vue.js 3.2.22:用useIntersectionObserver实现滑动到div可见时才运行css动画(@vueuse/core@7.0.3)
- Google Pagespeed,自动压缩优化JS/CSS/Image
- 对网站中的js,css文件进行打包
- js原生触发事件
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
- js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)
- js 中prototype运用(数组)
- css+js 实现一行多个盒子块元素响应式布局
- FastAdmin 浏览器 JS CSS 缓存如何更新?
- 【JS高级】js面向对象三大特性之继承_06
- 【CSS】css弹性布局、CSS hack_08
- JS从0到1——1. A + B