专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » 下拉列表css:如何用CSS设置下拉列表select 的样式？ »正文

下拉列表css:如何用CSS设置下拉列表select 的样式？

来源: 发布时间:星期四, 2009年2月12日 浏览:309次 评论:0


　　
　　我们在进行CSS网页布局时候常常会遇到下拉列表select我们可以应用CSS对表单元素进行控制可是下拉列表select样式该如何设置呢？

　　我们来看看下面xhtml代码这是个典型下拉列表select:
　
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
    <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代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
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;
}


　　我们再来看看运行效果吧:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

    =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


　　或许您对此依然不满意我们对此也无能为力更多思路方法是用js来进行控制和修改它外表在select外观上没给用户多少“自由”52css.com是有关css专题网站WebSite我们就不深入学习js控制是如何工作了我们没有更多css思路方法来改变它当然你可以通过改变滚动条背景颜色等将其进行更深美化但下拉列表小 3角是CSS所不能控制得了
　　不久将来或许将有更多更美妙办法来控制下拉列表select欢迎您关注我们网站WebSite:我爱CSS-www.52css.com
　　
标签：excel下拉列表 css下拉框样式 下拉框css 下拉列表css
0
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章