信息技术

当前位置: 主页 > WEB平面 > CSS >

select样式css美化

时间:2010-05-25 15:35来源:未知 作者:admin 点击:
本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不能用常

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

  1.  <style>   
  2. .box{border:1px solid   
  3. #C0C0C0;width:182px;height:19px;clip:rect(0px,181px,18px,0px);overflow:hidden;}   
  4. .box2{border:1px solid   
  5. #F4F4F4;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;}   
  6. select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;bo   
  7. rder:0px;color:#909993;}   
  8. </style>   
  9. <div class=box><div class=box2><select  hidefocus>   
  10. <option selected>网站的封面   
  11. <option value=031113>上海夏天(一一友情提供)   
  12. <option value=031106>上海夏天(一)   
  13. <option value=030916>上海夏天出版了   
  14. <option value=031018>在雨中(二)   
  15. <option value=030915>开往黎明的地铁(二)   
  16. <option value=030913>开往黎明的地铁   
  17. <option value=031029>亲爱的你们在干什么   
  18. <option value=000000>更多封面……   
  19. </select></div></div>  

如果你想彻底的改变select的样子,有一种方法是用htc,但它有个缺点就是除了ie内核的,其他的他不支持。 (责任编辑:admin)

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容