注意：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. 渗透神器CobaltStrike 3.1.2 去后门破解版 & Windows版TeamServer【转】

    转自我八师傅博客 CS简介 Cobalt Strike(简称CS)是全球黑客公认一款非常优秀的渗透测试神器,以metasploit为基础的GUI的框架式渗透工具,集成了传统远控功能(远程桌面VNC.键 ...

  2. linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下: chkconfig --list 可能输出如下: network         0:off   1:o ...

  3. 七、Vue Cli+ApiCloud

    一.api.js (参考) 顶部注释: 底部注释: 二.导入 效果: 继续使用: 运行环境:用APP打开,浏览器没有api对象,只有APP运行环境才有API对象 代码如下: <template& ...

  4. linux系统查看某个用户错误登录次数

    pam_tally2 --user user_name 查看user_name用户的错误登录次数 pam_tally2 --user user_name --reset 清空user_name用户的错 ...

  5. IO模型（epoll）--详解-02

    写在前面 从事服务端开发,少不了要接触网络编程.epoll作为linux下高性能网络服务器的必备技术至关重要,大部分游戏服务器都使用到这一多路复用技术.文章核心思想是:要让读者清晰明白EPOLL为什么 ...

  6. 测试人员必备：linux文件清理不得不知道的技巧

    测试人员最常见和繁琐的任务之一就是清理系统,比如防止磁盘空间出现不足.下面是我收集的一些常用的 Linux 文件系统相关命令. 一 检查可用空间 要查找服务器上所有文件系统上的可用空间,请执行以下命令 ...

  7. 如何自己搭建DNS服务器

    DNS服务器是计算机域名系统 (Domain Name System 或Domain Name Service) 的缩写,它是由 解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主机的域名和 ...

  8. 【bzoj 4059】Non-boring sequences

    这题的重点不在于代码,而在于复杂度分析…… 首先我们肯定会写 $n^2$ 暴力,就是每次暴力扫 $[l,r]$ 区间,找到任意一个在此区间中只出现过一次的数.设其下标为 $mid$,显然在这个区间中任 ...

  9. switch的参数类型

    switch(expr1)中,expr1是一个整数表达式,整数表达式可以是int基本类型或Integer包装类型,由于,byte,short,char都可以隐含转换为int,所以,这些类型以及这些类型 ...

  10. 设置apache服务器的访问证书，支持https访问，windows

    windows下载安装openssl http://slproweb.com/products/Win32OpenSSL.html windows证书的生成 安装成功后命令行执行 1.私钥,生成的文件 ...