注意：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. 全年DDoS攻击分析|知道创宇云安全2018年度网络安全态势报告

    *本报告由知道创宇云安全出品* 数据来源:知道创宇云防御平台 前言 2018年,网络安全领域暗流涌动,攻击趋势不断攀升,T级DDoS攻击多次爆发.数据泄露事件层出不穷.勒索软件大行其道.此外,随着我国 ...

  2. 使用Ant打包工具

    由于使用java,javac,jar等工具进行编译打包,即繁琐低效又容易出错,因此Ant出现了.Ant的出现就是专门为了打包编译java代码的,使用之前得稍微学一下.Ant的运行起来主要是依靠配置文件 ...

  3. 用户模式构造-简单自旋锁（SpinLock）

    internal sealed class SimpleSpinLock { //0等于false(默认),1等于true ; public void Enter() { while (true) { ...

  4. Tree HDU - 6547 （树链剖分，线段树）

    wls 有三棵树,树上每个节点都有一个值 ai,现在有 2 种操作: 将一条链上的所有节点的值开根号向下取整: 求一条链上值的和: 链的定义是两点之间的最短路. Input 第一行两个数 n, q 分 ...

  5. 线段树(SegmentTree)基础模板

    线段树模板题来源:https://www.lintcode.com/problem/segment-tree-build/description 201. 线段树的构造 /** * Definitio ...

  6. JavaScript This 的六道坎

    鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精. 首先 this is all about context. this说白了就是找大佬,找拥 ...

  7. 阅读之https及加密原理

    HTTPS(全称:Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版. 为什么需要https 使用htt ...

  8. 在linux 下安装git

    ① 安装 Git Linux 做为服务器端系统,Windows 作为客户端系统,分别安装 Git 服务器端: #yum install -y git 安装完后,查看 Git 版本 [root@loca ...

  9. 51 Nod N的阶乘的长度 (斯特林近似)

    1058 N的阶乘的长度  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Inp ...

  10. 51 Nod 1486 大大走格子

    1486 大大走格子  题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 有一个h行w列的棋盘,里面有一些格子是不 ...