注意：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. CDH5.16.1的Yarn提交任务默认资源分配

    1 同时运行5个Spark任务的资源分配截图 2 每个任务占用3个Container 3个core以及4.5GB内存 也就是说一个Container需要 1个core 以及 512MB的内存 如果资源 ...

  2. kubesphere集群节点扩容

    原有的节点是 : master[123] , node[1234] 新加的节点node5 一.修改配置文件hosts.ini [root@master0 ~]# /conf/hosts.ini [al ...

  3. deep_learning_Function_bath_normalization()

    关于归一化的讲解的博客——[深度学习]Batch Normalization(批归一化) tensorflow实现代码在这个博客——[超分辨率]TensorFlow中批归一化的实现——tf.layer ...

  4. Linux下putenv()函数导致composer更新失败

    bug复现: 原因: putenv() 函数设置特定的环境变量有可能是一个潜在的安全漏洞,所以这个函数在php配置文件中是默认禁止的,在 php.ini 中查找此函数,然后将此函数删除掉,重载配置即可 ...

  5. 跟着动画来学习TCP三次握手和四次挥手

    TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 点我查看如何应对面试中的三次握手.四次挥手 本篇尝试使用动画来对 ...

  6. 完美解决Mysql的Access denied for user 'root'@'%的'问题

    背景:mysql5.6 root已授权所有数据库,执行过下面的语句 grant all privileges on *.* to 'root'@'%' identified by 'root' 当使用 ...

  7. RE 逆向工程初学者指南：方法和工具

    简评: RE 两种分析,静态.动态.好好分析静态因为能够解决 70 % 的问题.介绍了一些工具和方法.Enjoy yourself. 最近几天,我决定试水逆向工程,即使在计算机和编程相关领域有一定的基 ...

  8. Python代码风格的良好养成

    Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下,不同程序员编写的 Python 代码可以保持最大程度的相似风格.这样就易于阅读, ...

  9. mysql导入redis

    将mysql中数据库指定表导入redis 如何将mysql中某个数据库中的表数据快速导入redis? 以下将演示将本地127.0.0.1中数据库test中的表t_abc导入本地redis中.步骤如下: ...

  10. css 点击打开遮罩

    <div> <nav class="bar bar-tab"> <a class="tab-item external" href ...