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

html-css07

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>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<style>

* { margin:0border:0padding:0list-style:nonelist-style-type:none}

.nav { width:1000pxfloat:left}

.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}

.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}

.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}

.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}

.nav li:hove span { background:#30F}

.nav li:hover p { display:block}

.nav li p a:hover { background:#36F}

.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}

</style>

</head>

<body>

<ul class="nav">

<li><a href="#"><span>频道1</span></a>

<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>

</li>

<li><a href="#"><span>频道2</span></a></li>

</ul>

<div class="bga">111</div>

</body>

</html>

上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<style>

* { margin:0border:0padding:0list-style:nonelist-style-type:none}

.nav { width:1000pxfloat:left}

.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}

.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}

.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}

.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}

.nav li.on span { background:#30F}

.nav li.on p { display:block}

.nav li p a:hover { background:#36F}

.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}

</style>

<script type="text/javascript" src="http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>

</head>

<body>

<ul class="nav">

<li><a href="#"><span>频道1</span></a>

<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>

</li>

<li><a href="#"><span>频道2</span></a></li>

</ul>

<div class="bga">111</div>

<script type="text/javascript">

$('.nav li').each(function(){

$(this).hover(function(){

$(this).addClass('on').siblings().removeClass('on')

})

})

</script>

</body>

</html>