阿宽

Nothing is more powerful than habit!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

隐藏select边框及下接箭头方法

Posted on 2009-01-16 11:39  宽田  阅读(6345)  评论(0编辑  收藏  举报

代码:

/*套在Select外层,用于隐藏Select框*/
.DivSelect
{
    position
: relative;
    background-color
: transparent;
    width
:  140px;
    height
: 17px;
    overflow
: hidden; /*隐藏了小三角,因为宽度为110px,而select宽度为130px*/
    border-width
:0px;
    border-top-style
: none; 
    border-right-style
: none; 
    border-left-style
: none; 
    border-bottom-style
: none;
}

/*设置Select样式*/
.SelectList
{
    position
: relative;
    background-color
: transparent;
    TOP
:   -2px;
    left
:-2px;
    border-width
: 0px;
    border-top-style
: none; 
    border-right-style
: none; 
    border-left-style
: none; 
    border-bottom-style
: none;
    width
:160px;
    display
:block;
    height
: 18px;
    overflow
:hidden;
}

 

                            <div class="DivSelect">
                                
<select class="SelectList">
                                    
<option>aaaa</option>
                                    
<option>aaaa</option>
                                    
<option>aaaa</option>
                                    
<option>aaaa</option>
                                
</select>
                            
</div>