如何用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教程

时间： 2024-09-26 10:16:42

如何用CSS设置下拉列表sel的相关文章

如何用css设置网页字体

css|网页 在网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效:而对于网页的字体却不太重视.结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用的都是标准字体,毫无个性而言.其实,字体作为网站内容的载体,有其独特的重要性,是不应该忽视的. 运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效

如何用CSS设置滚动条颜色？

我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢?   页面滚动条代码及其解释如下: scrollbar-3d-light-color 设置或检索滚动条亮边框颜色  scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色  scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色  sc

如何用CSS控制网页背景

在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在H

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des

效果 显示 css jquery-请问如何用css/Jquery实现大的鼠标，以及实现点击表哥高亮度显示

问题描述 请问如何用css/Jquery实现大的鼠标,以及实现点击表哥高亮度显示 最近上面给个任务,要求做一个layout如下图所示 如图所示,点击时要显示这个大的箭头光标,并且点击的那个表格要高亮显示.而原来的表格就像它下面两个,是看上去模糊的,我也不知道这种模糊的效果在网页上是怎么实现的? 盼望园子里的高手不吝赐教,谢谢 解决方案 模糊效果是用滤镜做的...不同浏览器有不同的关键字.. 解决方案二: css就可以..需要注意添加xhtml申明,要不cursor不支持多个候选资源设置 <!DO

javascript-如何用JS实现下拉列表

问题描述 如何用JS实现下拉列表 请问如何用JS实现这种样式的下拉列表,最好还能使用循环输出各个年份. 解决方案 1. 江西福建1//创建对象,数据,值,文本function obj(aData,aValue,aText){ this.Data=aData; this.Value=aValue; this.Text=aText;}//设置选项数据数组,可以添加多个参数为"源地址,选择值,选择文本"var Set_data=new Array( new obj('江西','南昌','南昌

css设置background-image不起作用，去掉&amp;amp;lt;div id=&amp;amp;quot;menuBar&amp;amp;quot;&amp;amp;gt;的id就行了，求具体原因

问题描述 css设置background-image不起作用,去掉<div id="menuBar">的id就行了,求具体原因 <html><head> <style type=""text/css""> #menuBar { /*display: none;*/ background-color: #fffd7a; width: 100%; } #menuBar div.menuItemTr {

关于使用Css设置Canvas画布大小的问题

我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩放到你设置的值. 原因 在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过Css设置画布尺寸会引起奇怪的效果. 解决方案 通过Html设置画布大小.可以直接在Html页面上设置Canvas元素的大小: <canvas id="testCanvas

css设置透明度

#right {  .......  filter:alpha(opacity=50);   -moz-opacity:0.5;   -khtml-opacity: 0.5;   opacity: 0.5;  }  以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , filter , 透明度 , alpha , right Opacity css 透明度.css设置div透明度.css设置透明.css设置图片透明度