注意：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. 点击切换JS

    $(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...

  2. 利用nethogs查看哪些进程占用网络带宽

    一.安装nethogs centos6版本安装: 1.安装依赖包 [root@hlsms-fensheng- ~]# yum install ncurses* 已加载插件:fastestmirror, ...

  3. PAT Basic 1010 一元多项式求导 (25 分)

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小 ...

  4. Hive 函数（六）

    Hive函数 ​ Hive中提供了非常丰富的运算符和内置函数支撑,具体操作如下: 1.内置运算符 1.1关系运算符 运算符 类型 说明 A = B 所有原始类型 如果A与B相等,返回TRUE,否则返回 ...

  5. IIS7设置限制IP地址访问

    1.拒绝访问设置,选择“一组计算机”,下面重点说明如何填写“网络标识”和“子网掩码”. IP地址按照IPV4的标准来分,分为A类地址.B类地址.C类地址,一般我们是屏蔽C类或者B类地址. A类地址:如 ...

  6. zabbix的简单操作（监控客户端MySQL数据包库）

    环境准备: 192.168.175.102    zabbix服务端 192.168.175.106    zabbix客户端(监控MySQL) 命令:iptables -F        #清空防火 ...

  7. JDK8之Stream新特性

    https://www.cnblogs.com/cbxBlog/p/9123106.html /** *JDK8 Stream特性 * Created by chengbx on 2018/5/27. ...

  8. GoAccess安装及分析nginx实时日志

    GoAccess是一个基于终端的快速日志分析器.其核心思想是实时快速分析和查看Web服务器统计信息,而无需使用您的浏览器(如果您希望通过SSH快速分析访问日志,或者只是喜欢在终端中工作),终端输出是默 ...

  9. 树形结构根据最后一位的id匹配整个路径

    function recursionTreeId(_arr, _id) { _arr.forEach(item => { if (item.id === _id) { optionArr.uns ...

  10. 创建Windows任务计划定时调用网页执行任务(通过Windows PowerShell的Invoke-WebRequest实现)

    前言:项目中使用RoadFlow工作流,设置超时自动提交功能,自动提交功能已有现成的网页可实现(http://127.0.0.1/WorkFlowRun/AutoSubmit),现需创建Windows ...