龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

如何用CSS设置下拉列表sel

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
我们在进行CSS网页布局的时候,常常会遇到下拉列表select,我们可以应用CSS对表单的元素进行控制,可是下拉列表select的样式该如何设置呢? 我们来看看下面的xhtml代码,这是一个典型
  
  我们在进行CSS网页布局的时候,常常会遇到下拉列表select,我们可以应用CSS对表单的元素进行控制,可是下拉列表select的样式该如何设置呢?
  我们来看看下面的xhtml代码,这是一个典型的下拉列表select:
 
    <select>
    <option>我爱CSS</option>
    <option>Div+CSS教程</option>
    <option>CSS布局实例</option>
    <option>CSS2.0教程</option>
    <option>CSS在线手册</option>
    <option>Web标准</option>
    <option>XHTML教程</option>
    </select>
  我们再来看看控制它的CSS代码:
div {
        border:1px solid #C0C0C0;
        width:183px;
        height:18px;
        clip:rect(0px,18px,22px,0px);
        overflow:hidden;
}
select {
        position:relative;
        left:-2px;
        top:-2px;
        font-size:12px;
        width:185px;
        line-height:18px;border:0px;
        color:#909993;
}
  我们再来看看运行的效果吧:
Source Code to Run [www.fun52.com]
www.fun52.com

我爱CSS
Div+CSS教程
CSS布局实例
CSS2.0教程
CSS在线手册
Web标准
XHTML教程

   [ 可先修改部分代码 再运行查看效果 ]
第 1 2 页
精彩图集

赞助商链接