原文链接: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. 员工选票系统-java

    Yuangong.java package com.toupiao; public class Yuangong { private String name; private int piao; pu ...

  2. Problems at works

    1.ssh无法连接服务器:因部署ftp服务,误将/var目录的所有者和所属组改成了ftp,以致于SSH无法二次连接: 2.集群服务器的hadoop的datanode节点死亡,在对应节点拉起即可.若无法 ...

  3. TCHAR字符串查找&反向查找字符串

    C++支持两种字符串,即常规的ANSI编码("字符串")和Unicode编码(L"字符串"),相应的就有两套字符串处理函数,比如:strlen和wcslen,分 ...

  4. js对象系列【一】深层理解对象与原型

    我们先从盘古开天辟地时捋一捋对象: 从宏观内容来讲,javascript是一个属性的集合,包括值,函数,而整个集合也可以类比为一个对象. js = { a的变量名: a的值, ... 函数b: fun ...

  5. gulp工程化工具

    gulpfile.js var gulp = require('gulp'); var rename = require('gulp-rename') var pump = require('pump ...

  6. Python OJ 从入门到入门基础练习 10 题

    1.天天向上的力量: 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值相 ...

  7. 【Docker】 积累

    ■ 磁盘空间和docker资源之间的关系 通过docker info | grep Space可以看到Docker占据的磁盘空间的信息.其中Data Space Used表示实际上docker资源占用 ...

  8. Nginx阻止对不明确主机名的请求

    在用户请求头中,有可能会有Host行不明确的情况,如果不想处理这类用户请求,那么可以定义一个默认的server来丢弃这类请求.例如 server{ listen default_server; ser ...

  9. (译文)JavaScript基础——JavaScript中的深拷贝

    在JavaScript中如何拷贝一个对象? 通过引用调用 function mutate(obj) { obj.a = true; } const obj = {a: false}; mutate(o ...

  10. 关于C语言的第0次作业

    1.你认为大学的学习生活.同学关系.师生关系应该是怎样的?请一个个展开描述. 我认为的大学学习生活是充实的,丰富多彩的,与高中快节奏.繁忙的生活有所不同.在上了大学我们都成熟了很多,懂得了包容与忍让, ...