原文链接: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. 【django之分页器】

    一.什么是分页功能 二.Django的分页器(paginator) 语法: paginator = Paginator(book_list, 8) #8条一页print("count:&qu ...

  2. 简单了解C语言内嵌汇编

    最近看自旋锁的实现,自选锁的循环查找锁的主要实现类似如下,该实现使用到了内嵌的汇编(摘自sanos内核,源代码有2处实现,一处使用intel汇编,是没有问题的,另一处使用内嵌汇编语法,源代码中为cmp ...

  3. bat脚本:Java一键编译(Javac java)

    bat脚本:Java一键编译(Javac java) D:    是指D盘 javat是要编译的.java文件所在的文件夹 也就是D:\javat bat代码: :start COLOR 0A cls ...

  4. struts2和spring mvc的区别

    在项目中使用struts2和spring mvc为了实现后台的业务代码和前台数据之间的传递,现在基本上不会有用struts2的了,几次面试问的最多的关于struts2的问题就是struts2和spri ...

  5. Python : Module

    在Python中,一个.py文件代表一个Module.在Module中可以是任何的符合Python文件格式的Python脚本.了解Module导入机制大有用处. 1 Module 组成 1.1 Mod ...

  6. python之Redis的字符串类型操作

    redis的数据类型: 字符串型    哈希     列表     集合     有序集合 1.String(字符串类型) set  命令:   设置一个键和值,键存在则只覆盖,返回ok > s ...

  7. 【Python】 Selenium 模拟浏览器 寻路

    selenium 最开始我碰到SE,是上学期期末,我们那个商务小组做田野调查时发的问卷的事情.当时在问卷星上发了个问卷,但是当时我对另外几个组员的做法颇有微词,又恰好开始学一些软件知识了,就想恶作剧( ...

  8. WEB 表格测试点

    Web页面的表格测试点: 1.表格列名 2.表格翻页.表格跳转到多少页.最后一页.首页 3.表格每页显示的数据, 数据的排序 4.表格无数据 5.表格支持的最大数据量 6.表格中数据内容超长时,显示是 ...

  9. bootstrap-table分页数据前台不显示

    问题:后台返回数据{"total":52,"rows":[{"ztname":"2007年新会计准则科目(李相)",&q ...

  10. JavaWeb学习笔记八 监听器

    监听器Listener jservlet规范包括三个技术点:servlet :listener :filter:监听器就是监听某个对象的的状态变化的组件.监听器的相关概念事件源: 被监听的对象(三个域 ...