【笔记】css 自定义select 元素的箭头样式
原文链接: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 元素的箭头样式的更多相关文章
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- 图片-定义select向下箭头样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS - 设置 select 元素的样式
注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
随机推荐
- Angular开发实践(二):HRM运行机制
引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么 ...
- Jquery入门(初学者易懂)
一.定义 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"w ...
- org.hibernate.PersistentObjectException: detached entity passed to persist
简单地来看,将一个游离的对象要被持久化(save)时报错. 我们知道要持久化对象时候,通常Hibernate会根据ID生成策略自动生成ID值,但是这个对象ID已经有值,所有抛错.这个错误会出现在配置如 ...
- Nginx代理转发Apache+svn
1.安装svn和httpd yum install httpd yum install subversion mod_dav_svn 创建仓库目录 mkdir -p /var/www/svn 3.创建 ...
- 漫谈Java IO之基础篇
Java的网络编程如果不是专门搞服务器性能开发或者消息分发,几乎可能涉及不到.但是它却是面试找工作必问的一个知识点,涵盖的知识体系也非常广泛,从Java底层IO原理到操作系统内核组成,再到网络TCP. ...
- 20161110-awk、sed测试题
1. 出题了:示例文本如下:aaaaabbbbbcccccdddaaaaabbbbbccccc 希望得到的结果如下:aaaaa|bbbbb|ccccc|dddaaaaa|bbbbb|ccccc 匹配要 ...
- Linux下的指令:find,which
1. 在Linux系统下,使用find来查找文件: find [path] [condition] [operation] path指定了在哪个目录查找,condition限定了查找条件,operat ...
- django之urls系统
Django的urls系统简介 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映 ...
- Beta第六天
听说
- C语言第二次作业---分支结构
一.PTA实验作业 题目1:计算分段函数[2] 1.实验代码 double x,y; scanf("%lf",&x); if(x>=0){ y=sqrt(x); } ...