CSS改变流动条的样式,代码如下:
scrollbar-face-color:#FEFAF1 (立体滚动条凸出部分的颜色)scrollbar-highlight-color:#FEFAF1 (滚动条空白部分的颜色)
scrollbar-shadow-color:#FEFAF1 (立体滚动条阴影的颜色)
scrollbar-arrow-color:#E6C3B9(上下按钮上三角箭头的颜色)
scrollbar-base-color:#FEFAF1 (滚动条的基本颜色)
scrollbar-darkshadow-color:#E6C3B9 (立体滚动条强阴影的颜色)
scrollbar-3dlight-color:#E6C3B9(滚动条亮边的颜色)
scrollbar-track-color:#FEFAF1} (滚动条的背景颜色)
CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
css是无法去掉默认select的下拉箭头的,除非自己用div+js+css实现自定义select控件。
1、定义html中的select标签
<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>
2、定义css样式:
* {
margin: 0
padding: 0
}
body {
padding: 50px 50px
}
.btn-select {
position: relative
display: inline-block
width: 150px
height: 25px
background-color: #f80
font: 14px/20px "Microsoft YaHei"
color: #fff
}
.btn-select .cur-select {
position: absolute
display: block
width: 150px
height: 25px
line-height: 25px
background: #f80 url(ico.png) no-repeat 125px center
text-indent: 10px
}
.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"
color: #f80
}
.btn-select select option {
text-indent: 10px
}
.btn-select select option:hover {
background-color: #f80
color: #fff
}
3、定义点击事件JS:
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
}
}
4、最终效果:
用插件:select2.js 百度搜索那个名字即可,现在基本是最好用的下拉组件。原理就是将原来的select隐藏,用新的div构建一个下拉菜单,遮盖在原来的位置。
自己做的话,可以试试在select上覆盖一个div层,用绝对定位。然后把select的透明度opacity写为0.01,不能为0,然后点击那个层,就相当与点击了那个select,div写什么就由你定了。