HTML里select的CSS样式的改变

来源:互联网  作者:NC_Editor
摘要:本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不能用常规的方法来定义CSS样…

本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题,于是找了一篇不错的文章转过来,希望对大家有帮助————
首先要告诉大家,如果你是用css的方法,除了箭头部分,其他都可以改变,这是很令人别扭的事,因为其他的样式改了,箭头部分改不了等于无用。
下面举个css改select的例子

<html>
<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: 14px; color: #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>
</html>

【相关文章】好搜一下
Firefox 3.5浏览器即将于6月30日正式发布

Firefox 3.5浏览器即将于6月30日

国外最新消息称,Mozilla发言人证实了将在6月30日也就是下周二正式发布Fi…