• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器

CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含select,下拉选择框等相关知识,佚名 希望在学习及工作中可以帮助到您
 

今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或者是使用网上一些现成的插件。

其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的,但既然折腾了这么久,还是说一下CSS实现的思路吧。

首先对于默认的样式:

 

刚开始想到使用背景,但经试验对select设置背景是无效的,于是后来就想到了覆盖,用其它元素把那个向下的箭头盖住,然后给这个元素设置背景,写了个demo发现可行,于是就有了下面的这些。

首先用一个a标签套住select:

您可能想查找下面的文章:

  • CSS怎么去掉select的下拉箭头样式
  • select元素中设置padding效果的方法
  • 使用CSS3的::selection改变选中文本颜色的方法
  • 用CSS和Div美化select样式的简单方法
  • CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器
  • 在IE8 FF中使用padding设置select控件文字垂直居中
  • select默认样式美化代码兼容移动端和pc端
  • CSS禁止文字选择user-select应用
  • CSS美化下拉框select在火狐和谷歌浏览器下已测试
  • Firefox中A元素包含Select时点击Select不能选择option bug

相关文章

  • 2017-08-06仿网易nec首页动画效果(实现原理+代码)
  • 2017-08-06CSS 制作有弹性的日历表
  • 2017-08-06CSS 网页布局应该避免滥用div元素
  • 2017-08-06CSS调整DIV最小高度问题探讨
  • 2017-08-0615个必须阅读的CSS入门文章
  • 2017-08-06Link 标签 rel=Stylesheet的实际作用
  • 2017-08-06优秀的CSS 框架整理
  • 2017-08-06CSS属性display:inline-block用法深入理解
  • 2017-08-06CSS 网页制作时遇到问题的快速参考技巧
  • 2017-08-06HTML默认样式表CSS属性除了inline和block的定义

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css 兼容性书写记录
    • 简单的CSS 下拉导航菜单实现代码
    • csshover.htc在IE7下使用:active伪类无效解决方法
    • display:inline-block的使用示例
    • 使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
    • html+css给单独某一表格定义样式示例
    • 自适应屏幕的CSS响应式布局设计技巧总结
    • 那些不常用却很有的CSS小结
    • IE6下不能设置height:1px的元素是什么原因如何解决
    • CSS3实现的炫酷菜单代码分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有