用css改变下拉框样式

html-css08

用css改变下拉框样式,第1张

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

就像文本输入框<input>样式改变一样 我要改变的是<select><option></option></select>标签下拉框的样式 另外补充一点 我不要作成模拟下拉框 不要看且麻烦(除非你有很简单的模拟下拉框~HOHO~)谢谢大家!对不起,上次我问错了地方,现在只有这6分了

解析:

例一:

<select name=select size="1" class="page_speeder_1165166956">

<option value="2" selected>yesky</option>

<option value="1">redidea</option>

</select>

查一下手册,还有好多项可以设置.

例二:

<>

<head>

<style>

.box

{

border: 1px solid #C0C0C0

width: 182px

height: 20px

clip: rect( 0px, 181px, 20px, 0px )

overflow: hidden

}

.box2

{

border: 1px solid #F4F4F4

width: 180px

height: 18px

clip: rect( 0px, 179px, 18px, 0px )

overflow: hidden

}

select

{

position: relative

left: -2px

top: -2px

width: 183px

line-height: 14pxcolor: #909993

border-style: none

border-width: 0px

}

</style>

</head>

<body>

<div class = box><div class = box2>

<select size = "1" name = "D1">

<option>内容一</option>

<option>内容二</option>

</select>

</div></div>

</body>

</>

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题,以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框),则必须将hover属性附着在按钮盒子的上一级盒子上,但是通常上一级的盒子比当前盒子大或者里面有多个小盒子,那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示,于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮,并将下拉菜单附着于此。

第一想法就是给未显示(默认隐藏时)的下拉菜单栏添加,其结果就是边框一直处于显示状态,在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面,未显示时的边框设置为零。

未显示时属性为( display: none)显示时属性为(display: block),结果就是能够显示与隐藏,但是动画效果没有表现出来。想不通...

除了使用display的属性之外,还可以使用:下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中(隐藏时)的height设置为零,hover中(显示时)的height设置为110px,使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏,但是是通过visibility:visible显示隐藏,动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果,理解甚微,纰漏繁多,还请斧正。

比如说:下拉菜单收起时的动画没有搞明白怎样控制,而且下拉菜单收起时的动画没有边框;假如使用visibility: hidden和visibility:visible实现隐藏和显示时,会出现动画效果播放完之前,下拉菜单栏内容已经展示出来。

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>

<div class='div1'>

<select>

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

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

</div>

</body>

</html>