(转)让select也炫起来

大家都见过用CSS定义的各色的input按钮，但对于select却无法用定义input的简单方式来实现。下面提供另外一种css定义的方式来让你的select炫起来。

CSS部分：

 

1. .select * {   
2.   margin: 0;   
3.   padding: 0;   
4. }   
5.   
6. .select {   
7.   border:1px solid #cccccc;   
8.   float: left;   
9.   display: inline;   
10.   }   
11.   
12. .select div {   
13.   border:1px solid #f9f9f9;   
14.   float: left;   
15. }   
16.   
17. /* 子选择器，在FF等非IE浏览器中识别 */  
18. .select>div {   
19.   width:120px;   
20.   height: 17px;   
21.   overflow:hidden;   
22.   }   
23.      
24. /* 通配选择符，只在IE浏览器中识别 */  
25. * html .select div select {   
26.   display:block;   
27.   float: left;   
28.   margin: -2px;   
29. }   
30.   
31. .select div>select {   
32.   display:block;   
33.   width:124px;   
34.   float:none;   
35.   margin: -2px;   
36.   padding: 0px;   
37. }   
38.   
39. .select:hover {   
40.   border:1px solid #666666; //鼠标移上的效果    
41. }   
42.   
43. .select select>option {   
44.   text-indent: 2px; //option在FF等非IE浏览器缩进2px  
45. }  

XHTML部分:

1. <div class="select">  
2.  <div>  
3.  <select>  
4.   <option>飞飞爱赜赜option>  
5.   <option>飞飞爱赜赜option>  
6.   <option>飞飞爱赜赜option>  
7.  select>  
8.  div>  
9. div>  

 转自  http://www.csser.com/html/csser/webstandards/200703/09/1126.html