原文链接:https://www.imooc.com/qadetail/187585?t=281881

最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css 的 appearance 属性为 none,再通过设置背景图片 background-image 另其显示一个自定义的箭头即可

代码如下:

/* 清除部分现代浏览器的 select 默认样式 */
appearance:none;
-moz-appearance:none;
-webkit-appearance:none; /* 清除ie 浏览器的默认样式 */
select::-ms-expand {
display: none;
}

【笔记】css 自定义select 元素的箭头样式的更多相关文章

  1. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  2. amazeui学习笔记--css(HTML元素5)--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  3. amazeui学习笔记--css(HTML元素4)--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  4. amazeui学习笔记--css(HTML元素2)--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  5. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  6. 图片-定义select向下箭头样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS - 设置 select 元素的样式

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

  8. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  9. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

随机推荐

  1. 使用Quartz 2D擦除图片

    Quartz 2D 是一个强大的二位图像绘制引擎,在开发中如果遇到需要高度自定义的控件,我们就可能需要用Core Graphics进行绘制. 这几天一同事开发一个聊天中的一个子模块,A 画一幅图,然后 ...

  2. ASP.NET MVC上传图片的奇怪问题

    本文来源于博客园-钱智慧,转载请注明出处 表现:客户说就华为的手机有问题,而且是在QQ里打开有问题,如果在手机的浏览器上,则可以正常上传图片. 有问题的代码如下: private ResultMode ...

  3. linux性能调试之vmstat

    linux性能监控调优工具vmstat: vmstat:用于监控.显示系统运行过程中的虚拟内存/CPU/磁盘状态. 简单示例(时间间隔2s,监控2次): 重要字段解释: r 表示运行队列(等待运行的进 ...

  4. 使用localStorage保存搜索记录

    //过滤一个结果的空记录添加,过滤空搜索 默认保存10条记录,自己可修改 function setHistoryItems(keyword) { keyword = keyword.replace(& ...

  5. C语言描述队列的实现及操作(链表实现)

    // 队列的单链表实现 // 头节点:哨兵作用,不存放数据,用来初始化队列时使队头队尾指向的地方 // 首节点:头节点后第一个节点,存放数据 #include<stdio.h> #incl ...

  6. Beta冲刺 第六天

    Beta冲刺 第六天 1. 昨天的困难 1.对于设计模式的应用不熟悉,所以在应用上出现了很大的困难. 2.SSH中数据库的管理是用HQL语句实现的,所以在多表查询时出现了很大的问题. 3.页面结构太凌 ...

  7. 随机ID添加

    var http = require("http"); var fs = require("fs"); var server = http.createServ ...

  8. Linux进程管理之task_struct结构体

    进程是处于执行期的程序以及它所管理的资源(如打开的文件.挂起的信号.进程状态.地址空间等等)的总称.注意,程序并不是进程,实际上两个或多个进程不仅有可能执行同一程序,而且还有可能共享地址空间等资源. ...

  9. iOS开发-即时通信XMPP

    1. 即时通信 1> 概述 即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷,服务提供商也提供了越来越丰富的通讯服务功能 ...

  10. GPUImage实战问题解决

    在项目中遇到了使用完GPUImage以后,内存不释放的问题,翻阅官方API,找到了解决方法: deinit{ GPUImageContext.sharedImageProcessingContext( ...