您的位置：首页 > 网站优化 > css  >  如何用CSS设置下拉列表sel

如何用CSS设置下拉列表sel

 更新时间：2017年7月6日 23:13  点击：2387

我们在进行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教程

[!--infotagslink--]

相关文章

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框，内容为当前年份及前后50年，默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(...2014-05-31

  • Python 列表(List)的底层实现原理分析

    这篇文章主要介绍了Python 列表(List)的底层实现原理分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • JavaScript实现网页下拉列表的省市联动

    这篇文章主要为大家详细介绍了JavaScript实现网页下拉列表的省市联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-07

  • C# 列表List的常用属性和方法介绍

    这篇文章主要介绍了C# 列表List的常用属性和方法介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12

  • 微信小程序虚拟列表的实现示例

    大部分小程序都会有这样的需求，页面有长列表，需要下拉到底时请求后台数据，一直渲染数据，当数据列表长时，会发现明显的卡顿，页面白屏闪顿现象，那么如何实现小程序虚拟列表，感兴趣的可以了解一下...2021-07-16

  • AngularJS使用ngOption实现下拉列表的实例代码

    这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25

  • 解决vue动态下拉菜单 有数据未反应的问题

    这篇文章主要介绍了解决vue动态下拉菜单 有数据未反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-06

  • php有序列表或数组中删除指定的值的实现代码

    这篇文章主要介绍了php有序列表或数组中删除指定的值的实现代码,删除给定的值之后，得到一个新的有序列表，长度-1，下面是具体的实现方法...2021-08-22

  • DropDownList添加客户端下拉事件操作

    我们知道，DropDownList下拉框是一个服务器控件，有时候，有些朋友为了方便绑定DropDownList下拉框的选项，但又想在DropDownList实现客户端的下拉事件，那该怎么实现呢？...2021-09-22

  • uniapp 仿微信的右边下拉选择弹出框的实现代码

    这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-12

  • Perl中的列表和数组学习笔记

    这篇文章主要介绍了Perl中的列表和数组学习笔记,本文讲解了列表、数组--列表的存贮、数组的存取、字符串中的方括号和变量替换、列表范围、数组的输出等内容,需要的朋友可以参考下...2020-06-29

  • js动态添加带圆圈序号列表的实例代码

    这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-18

  • 如何让vue长列表快速加载

    这篇文章主要介绍了如何让vue长列表快速加载，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-03-26

  • 如何用CSS设置下拉列表sel

    我们在进行CSS网页布局的时候，常常会遇到下拉列表select，我们可以应用CSS对表单的元素进行控制，可是下拉列表select的样式该如何设置呢？ 　　我们来看看下面的xhtml...2017-07-06

  • 基于jQuery实现音乐播放试听列表

    这篇文章主要介绍了基于jQuery实现音乐播放试听列表的相关资料,需要的朋友可以参考下...2016-04-17

  • c++获取进程信息列表和进程所调用的dll列表

    这篇文章主要介绍了c++获取进程信息列表和进程所调用的dll列表，大家参考使用吧...2020-04-25

  • Android小程序实现音乐播放列表

    这篇文章主要为大家详细介绍了Android小程序实现音乐播放列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-05-23

  • python实现删除列表中某个元素的3种方法

    这篇文章主要介绍了python实现删除列表中某个元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-27