<!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. oracle 存储过程和函数例子

    关于 游标 if,for 的例子 create or replace procedure peace_if is cursor var_c is select * from grade; begin ...

  2. 【转】介绍设置Session失效的几种方法

    转载地址:http://developer.51cto.com/art/201106/269493.htm Session对象是HttpSessionState的一个实例.该类为当前用户会话提供信息, ...

  3. Javascript中最常用的经典技巧

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...

  4. TreeView 节点的显示，读取，操作

    using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq ...

  5. 哈希-Snowflake Snow Snowflakes 分类： POJ 哈希 2015-08-06 20:53 2人阅读 评论(0) 收藏

    Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 34762 Accepted: ...

  6. Fibonacci Again 分类： HDU 2015-06-26 11:05 13人阅读 评论(0) 收藏

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...

  7. office软件

    32位系统office2013: http://pan.baidu.com/s/1bnCqMZ1 64位系统office2013: http://pan.baidu.com/s/1i33rdHF vi ...

  8. logo上线

  9. PowerShell调用jira rest api实现jira统计自动化

    通过调用JIRA Rest web api实现统计自动化,首先进行登录模拟: $content = @{username='用户名';password='密码'} $JSON=$content|con ...

  10. CentOS 安装Redis

    redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value类型相对更多,包括strin ...