求css模拟select下拉菜单

2023-02-20 06:24:01html-css017

求css模拟select下拉菜单,第1张

<title>模拟select控件</title>

<style>

html,body{height:100%overflow:hidden}

body,div,form,h2,ul,li{margin:0padding:0}

ul{list-style-type:none}

body{background:#23384efont:12px/1.5 \5fae\8f6f\96c5\9ed1}

#search,#search form,#search .box,#search .select,#search a{background:url(http://www.codefans.net/jscss/demoimg/201206/search.jpg) no-repeat}

#search,#search .box,#search form{height:34px}

#search{position:relativewidth:350pxmargin:10px auto}

#search .box{background-position:right 0}

#search form{background-repeat:repeat-xbackground-position:0 -34pxmargin:0 20px 0 40px}

#search .select{float:leftcolor:#fffwidth:190pxheight:22pxcursor:pointermargin-top:4pxline-height:22pxpadding-left:10pxbackground-position:0 -68px}

#search a{float:leftwidth:80pxheight:24pxcolor:#333letter-spacing:4pxline-height:22pxtext-align:centertext-decoration:nonebackground-position:0 -90pxmargin:4px 0 0 10px}

#search a:hover{color:#f60background-position:-80px -90px}

#search .sub{position:absolutetop:26pxleft:40pxcolor:#fffwidth:198pxbackground:#2b2b2bborder:1px solid #fffdisplay:none}

#search .sub li{height:25pxline-height:24pxcursor:pointerpadding-left:10pxmargin-bottom:-1pxborder-bottom:1px dotted #fff}

#search .sub li.hover{background:#8b8b8b}

</style>

window.onload = function ()

{

var oSelect = document.getElementsByTagName("span")[0]

var oSub = document.getElementsByTagName("ul")[0]

var aLi = oSub.getElementsByTagName("li")

var i = 0

oSelect.onclick = function (event)

{

var style = oSub.style

style.display = style.display == "block" ? "none" : "block"

//阻止事件冒泡

(event || window.event).cancelBubble = true

}

for (i = 0i <aLi.lengthi++)

{

//鼠标划过

aLi[i].onmouseover = function ()

{

this.className = "hover"

}

//鼠标离开

aLi[i].onmouseout = function ()

{

this.className = ""

}

//鼠标点击

aLi[i].onclick = function ()

{

oSelect.innerHTML = this.innerHTML

}

document.onclick = function ()

{

oSub.style.display = "none"

}

</script>

</head>

<body>

<form>

<span class="select">请选择游戏名称</span>

</form>

</div>

<li>地下城与勇士</li>

<li>大话西游II</li>

<li>QQ幻想世界</li>

</ul>

</div>

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:

<html>

<head>

<style>

.div1{

width:600px

height:200px

font-size:13px

}

.div select{

width:200px

}

.div select option{

width:150px

height:30px

}

</head>

<body>

<option value="volvo">Volvo</option>

</select>

</div>

</body>

</html>

这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：

<option>option 1</option>

<option>option 2</option>

<option>option 3</option>

<option>option 4</option>

<option>option 5</option>

</select>

</div>

首先要去掉 #select 的默认样式：

/* 去掉默认样式，设置新的样式 */

#select{

display:block