css怎样设置下拉列表(select)样式？

html-css010

css怎样设置下拉列表(select)样式？,第1张

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>

举个例子，照着做就可以了

<style type="text/css">

<!--

.select * {

margin: 0

padding: 0

}

.select {

border:1px solid #cccccc

float: left

display: inline

}

.select div {

border:1px solid #f9f9f9

float: left

}

/* 子选择器，在FF等非IE浏览器中识别 */

.select>div {

width:120px

height: 17px

overflow:hidden

}

/* 通配选择符，只在IE浏览器中识别 */

* html .select div select {

display:block

float: left

margin: -2px

}

.select div>select {

display:block

width:124px

float:none

margin: -2px

padding: 0px

}

.select:hover {

border:1px solid #666666//鼠标移上的效果

}

.select select>option {

text-indent: 2px//option在FF等非IE浏览器缩进2px

}

-->

</style>

</head>

<body><div class="select">

<div>

<select>

<option>看见效果了吧</option>

<option>看见效果了吧</option>

<option>看见效果了吧</option>

</select>

</div>

</div>

你看看这段代码中对select的设置

在IE中CSS能控制select高宽,在火狐中可以控制的比较多

直接在select上加class就可以设置CSS了

例:

<style type="text/css">

.selectYs{ width:300pxbackground:#F00}

</style>

<form action="#">

<select class="selectYs">

<option value="">1111

<option value="">1111

<option value="">1111

<option value="">1111

</select>

</form>

有的属性浏览器不兼容,但大部分还是可以的你自己试试就知道了