`

(转)让select也炫起来

    博客分类:
  • css
阅读更多

大家都见过用CSS定义的各色的input按钮,但对于select却无法用定义input的简单方式来实现。下面提供另外一种css定义的方式来让你的select炫起来。

CSS部分:

 

  1. .select * {   
  2.   margin: 0;   
  3.   padding: 0;   
  4. }   
  5.   
  6. .select {   
  7.   border:1px solid #cccccc;   
  8.   floatleft;   
  9.   displayinline;   
  10.   }   
  11.   
  12. .select div {   
  13.   border:1px solid #f9f9f9;   
  14.   floatleft;   
  15. }   
  16.   
  17. /* 子选择器,在FF等非IE浏览器中识别 */  
  18. .select>div {   
  19.   width:120px;   
  20.   height17px;   
  21.   overflow:hidden;   
  22.   }   
  23.      
  24. /* 通配选择符,只在IE浏览器中识别 */  
  25. * html .select div select {   
  26.   display:block;   
  27.   floatleft;   
  28.   margin: -2px;   
  29. }   
  30.   
  31. .select div>select {   
  32.   display:block;   
  33.   width:124px;   
  34.   float:none;   
  35.   margin: -2px;   
  36.   padding0px;   
  37. }   
  38.   
  39. .select:hover {   
  40.   border:1px solid #666666; //鼠标移上的效果    
  41. }   
  42.   
  43. .select select>option {   
  44.   text-indent2px; //option在FF等非IE浏览器缩进2px  
  45. }  


XHTML部分:

  1. <div class="select">  
  2.  <div>  
  3.  <select>  
  4.   <option>飞飞爱赜赜option>  
  5.   <option>飞飞爱赜赜option>  
  6.   <option>飞飞爱赜赜option>  
  7.  select>  
  8.  div>  
  9. div>  

 转自  http://www.csser.com/html/csser/webstandards/200703/09/1126.html

分享到:
评论

相关推荐

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    除此之外,CSS3的阴影效果(`box-shadow`)被用来增强菜单的立体感,使其看起来更加真实和吸引人。这种阴影不仅可以在菜单元素周围添加,还可以在下拉菜单展开时动态改变,增加视觉冲击力。 JavaScript在这其中的...

    酷炫下拉框(自行实现,3d翻转效果)

    3. **3D空间(Perspective)**:为了使3D翻转看起来更自然,我们需要设置一个`perspective`值,这将定义观察者与3D元素之间的距离,影响元素的近大远小效果。 三、JavaScript交互控制 虽然HTML5和CSS3提供了丰富的...

    GIMP中文教程.pdf )

    - **应用场景**:用于创建层次感,让设计看起来更加立体和有趣。 **知识点7:选择与修改选区** - **操作方法**:使用选择菜单中的“收缩”命令缩小选区,再用“反向选择”命令反转选区,最后调整亮度和对比度。 - *...

    55links友情链接网址跟踪器

    55links友情链接网址跟踪器,放在桌面,每次直接打开就可以访问55links友情链接交易平台,方便快捷。

    [AB PLC例程源码][MMS_046180]CompactFlash Data Storage.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    moore_01_0909.pdf

    moore_01_0909

    FIBR English learning

    FIBR English learning

    [AB PLC例程源码][MMS_042350]How to send-receive SMS text messages using Westermo modem.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    OIF_IEEE802.3_liaison_19OCt09.pdf

    OIF_IEEE802.3_liaison_19OCt09

    SerU,做网络安全FTP内容的实验必备

    做网络安全FTP内容的实验必备

    nagarajan_01_1107.pdf

    nagarajan_01_1107

    [AB PLC例程源码][MMS_043879]Programming in SFC and ST Language.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    mellitz_3cd_01_0318.pdf

    mellitz_3cd_01_0318

    PyQt6实战派 配套代码

    PyQt6实战派 配套代码

    陕西省省级非物质文化遗产民俗经纬度数据统计表

    陕西省省级非物质文化遗产经纬度数据统计表 统计内容包含以下字段: 1. 项目名称 2. 遗产类别 3. 入选批次 4. 所属地区 5. 申报地区/单位 6. 地理经度 7. 地理纬度 该统计表系统记录了陕西省省级非物质文化遗产的地理空间信息,为文化遗产的数字化保护与研究工作提供了重要的数据支撑。

    ran_3ck_02a_0918.pdf

    ran_3ck_02a_0918

    毕业设计-基于springboot+vue开发的汽车租赁管理系统【源码+sql+可运行】50308.zip

    毕业设计_基于springboot+vue开发的汽车租赁管理系统【源码+sql+可运行】【50308】.zip 全部代码均可运行,亲测可用,尽我所能,为你服务; 1.代码压缩包内容 代码:springboo后端代码+vue前端页面代码; 脚本:数据库SQL脚本 效果图:运行结果请看资源详情效果图 2.环境准备: - JDK1.8+ - maven3.6+ - nodejs14+ - mysql5.6+ - redis 3.技术栈 - 后台:springboot+mybatisPlus+Shiro - 前台:vue+iview+Vuex+Axios - 开发工具: idea、navicate 4.功能列表 - 系统设置:用户管理、角色管理、资源管理、系统日志 - 业务管理:汽车管理、客户管理、租赁订单 3.运行步骤: 步骤一:修改数据库连接信息(ip、port修改) 步骤二:找到启动类xxxApplication启动 4.若不会,可私信博主!!!

    Runcorder - 跑步训练管理系统

    # Runcorder - 跑步训练管理系统 Runcorder 是一款专为跑步爱好者、马拉松运动员及高校体育生设计的本地化跑步训练管理工具,基于 Python 开发,结合 Tkinter 图形界面与强大的数据处理能力,为用户提供从训练记录到数据分析的全方位支持。无论是初学者还是专业跑者,Runcorder 都能帮助你科学规划训练、精准追踪进度,并通过可视化图表直观呈现训练成果,让你的跑步训练更智能、更高效! - **多用户管理**:支持创建、加载和删除用户档案,每个用户的数据独立存储,确保隐私与安全。 - **科学训练记录**:全维度记录跑步数据,包括日期、里程、配速、自评和晨跑标记,支持智能输入校验,避免数据错误。 - **多维数据分析**:通过动态可视化图表展示跑步里程趋势、平均配速曲线,支持自定义 Y 轴范围,帮助用户深入理解训练效果。 - **高阶功能**:提供 4 种科学训练模式(有氧/无氧/混合),支持历史记录修改与删除,数据以 JSON 格式持久化存储,跨平台兼容。

    paatzsch_01_0708.pdf

    paatzsch_01_0708

    开源AI工具下载——AnythingLLMDesktop1.7.3-r2 windows版

    AnythingLLM是一个全栈应用程序,您可以使用流行的开源大语言模型,再结合向量数据库解决方案构建个人本地AI大模型知识库

Global site tag (gtag.js) - Google Analytics