好学IT学院:IT信息技术分享交流平台
来源:互联网  作者:NC_Editor  发布时间:2008-02-19  ★★★加入收藏〗〖手机版
摘要:本以为可以很简单的在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>

经典推荐:专业网页设计教程
  看过很多网页设计教程文章,但不是说的太高深,对我们实际设计工作并无什么用处,就是东拼西凑的用PHOTOSHOP做几个效果,就是所谓…
  • 好学触屏公众号虎力全开、杨帆起航!
  • 四大名著全套小学生版注音版
  • 诗词中的科学全4册
  • 曹文轩系列儿童文学全套画本