Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 如何用CSS设置下拉列表sel

如何用CSS设置下拉列表sel

发布时间:2020-06-03   编辑:www.jquerycn.cn
jquery中文网为您提供如何用CSS设置下拉列表sel等资源,欢迎您收藏本站,我们将为您提供最新的如何用CSS设置下拉列表sel资源

我们在进行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;
}

 

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


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

您可能感兴趣的文章:
Jquery操作下拉框(DropDownList)实现取值赋值
jquery获取元素值的方法(常见的表单元素)
jquery中对表单的基本操作代码
JQuery 常用操作代码
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery实现鼠标滑过显示导航下拉列表
jQuery获取Select选择的Text和Value(详细汇总)
JQuery操作三大控件(下拉,单选,复选)的方法
editable.js 基于jquery的表格的编辑插件
jQuery之过滤元素操作小结

[关闭]