CSS怎么改变表单下拉框箭头和滚动条样式

html-css09

CSS怎么改变表单下拉框箭头和滚动条样式,第1张

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、最终效果:

并非是CSS制作的,而是HTML的表单当中的下拉菜单标签

比如

<select>

<option>HTML5学堂</option>

<option>原创技术文章分享</option>

</select>

如果你不希望使用系统自定义的下拉菜单,那么,你需要使用各种元素(比如div),进行定位等处理,实现想要的样式,再之后,需要使用JS进行控制