注意：option 外面有个框，这个框不同浏览器生成的还不一样，给这个框设置样式的方法也没有找到（有说法是这是浏览器创建的 shadow dom 没法设置）。所以要想完全控制还是用列表进行模拟比较好。

设置 select 元素样式主要是要将那个默认的图标给改掉，方法一般来首有三种：

  1. appearance: none隐藏默认图标。
  2. overflow: hidden截去默认图标。
  3. ::after覆盖默认图标，为了不让 ::after伪元素作为事件的目标要设置pointer-events: none。

参见：html - How to style a select dropdown with only CSS? - Stack Overflow

CSS - 设置 select 元素的样式的更多相关文章

  1. 【笔记】css 自定义select 元素的箭头样式

    原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. 转：CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  4. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  5. css设置兼容的透明样式

    css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...

  6. css设置select高度（IE，FF,Chrome）[转]

    大家都知道select是无法设置高度和边框颜色等等的在ie67下面,其他的都是可以的,所以有时候为了在所有的浏览器下显示都一致,就使用了 js的模拟,这个是大家经常碰到的,js不光要模拟外观还有模拟事 ...

  7. css设置网页文本选中样式

    网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...

  8. css清除select默认的样式

    select在firefox与chrome的显示是不一样的,我们一般选择通过css清除掉css的默认样式,然后再增添自定义的样式来解决,css我们一般用这么几行代码来清除默认样式: 1 select ...

  9. html网页什么样的字体最好看，css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

随机推荐

  1. 多线程的些许理解（平台x86，具体考虑linux,windows）

    多线程的些许理解 一.体系架构 1.原子操作 1) 定义 不可中断的一个或者一系列操作,也就是不会被线程调度机制打断的操作,在运行期间不会有任何的上下文切换(context switch). 2) 我 ...

  2. 使用redislive监控redis

    redis监控工具redislive的安装 1. pip安装 如果主机没有pip先安装pip工具 wget --no-check-certificate https://github.com/pypa ...

  3. 多个类用@feignclient标注同一个服务,出错问题:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.Caused by: org.springframework.beans.factory.support.Bea..

    如果标注了两个或以上类 @FeignClient 标注同一个 服务名称 调用方会主配置类启动会报错 测试类报错 java.lang.IllegalStateException: Failed to l ...

  4. redis性能指标

    1.当内存使用达到设置的最大阀值时,需要选择一种key的回收策略,可在Redis.conf配置文件中修改“maxmemory-policy”属性值. 若是Redis数据集中的key都设置了过期时间,那 ...

  5. 25、Nginx常见典型故障

    1.为什么nginx里面有的是浏览器渲染出的页面,有的时候就变成下载文件? 这个一个取决于服务端nginx,一个取决于你浏览器.在Nginx服务端的配置文件目录下,有一个mime.types 文件,内 ...

  6. 一般情况下的NB-IoT网络架构

    一. NB总体网络架构 NB-IoT端到端系统架构如下图所示: 终端:UE(User Equipment),通过空口连接到基站(eNodeB(evolved Node B , E-UTRAN 基站)) ...

  7. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  8. Oracle 导入dump

    1. 准备好.dmp文件

  9. 宝塔linux面板命令大全 - 宝塔面板

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...

  10. Hibernate 缓存机制详细分析

    在本篇随笔里将会分析一下hibernate的缓存机制,包括一级缓存(session级别).二级缓存(sessionFactory级别)以及查询缓存,当然还要讨论下我们的N+1的问题. 随笔虽长,但我相 ...