在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式

去掉select的边框和点击时的蓝色边框

select{border: none;outline: none;}

去掉select下拉的小三角

select{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
} select::-ms-expand { display: none; }  /*清除ie的默认选择框样式清除,隐藏下拉箭头*/

所有浏览器都不支持appearance属性

Firefox支持替代的-moz-appearance属性

Safari和Chrome支持替代的-weblit-appearance属性

option的框是浏览器默认的,没有办法修改,想必你肯定试过option{border:0}和option{border:none}吧,没有效果

修改select的默认样式的更多相关文章

  1. ie,火狐,谷歌 select清除默认样式 设置新的样式

    select { border: solid 1px #000; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ appearance:none; -moz-appearan ...

  2. select框默认样式去除(ie中隐藏默认下拉图标)

    html代码 <select class="info-select"> <option selected="selected">1< ...

  3. 修改element ui 默认样式最好的解释

    KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的 ...

  4. react中修改antd的默认样式

    最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...

  5. select去掉默认样式

    今天遇到的问题,并在这里做一下记录和总结 去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px ...

  6. 关于select的默认样式问题

    select { border: solid 1px #000; appearance:none; -moz-appearance:none; -webkit-appearance:none; pad ...

  7. css3修改浏览器scroll默认样式

    最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...

  8. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

  9. css修改overflow滚动条默认样式

    html代码 <div class="inner"> <div class="innerbox"> <p style=" ...

随机推荐

  1. 20191127 Spring Boot官方文档学习(9.1-9.3)

    9."使用方法"指南 9.1.Spring Boot应用程序 9.1.1.创建自己的FailureAnalyzer FailureAnalyzer被包装在FailureAnalys ...

  2. 【Go语言】map在goroutine通信中的使用问题

    简介 本篇文章的主要内容是解决go语言map在使用中遇到的两个问题,对于初学者是不可避免的坑 一.cannot assign to struct field 当map中存在struct类型的成员,如果 ...

  3. P1118 [USACO06FEB]数字三角形`Backward Digit Su`… (dfs)

    https://www.luogu.org/problemnew/show/P1118 看的出来是个dfs 本来打算直接从下到上一顿搜索 但是不会 看了题解才知道系数是个杨辉三角....... 这样就 ...

  4. Mysql 5.7存储过程的学习

    存储过程:对sql的封装和重用,经编译创建并保存在数据库中,通过指定存储过程的名字并给定参数(需要时)来调用执行. 优缺点: (1) 优点: 执行速度快------存储过程只在创建时进行编译,以后每次 ...

  5. MySQL-快速入门(1)基本数据库、表操作语句

    1.创建数据库 create database db_name;show create database db_name\G; //查看数据创建语句show databases; //查看当前创建的数 ...

  6. Codeforces 1262F Wrong Answer on test 233(组合数)

    E1:设dp[i][j],表示在第i个位置的当前新状态超过原状态j分的方案数是dp[i][j],那么对于这种情况直接进行转移即可,如果a[i]==b[i]显然k种选择都可以,不影响j,如果不一样,这个 ...

  7. BZOJ 4033: [HAOI2015]树上染色题解

    BZOJ 4033: [HAOI2015]树上染色题解(树形dp) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1327400 原题地址: BZOJ 403 ...

  8. Redis哨兵功能与集群搭建

    6.redis哨兵功能 Redis-Sentinel Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机, ...

  9. Sublime Text 3 安装及汉化操作

    Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写检查,书签,完整的 ...

  10. react面试题——理解setState(源码object.assign)

    setState是异步的方式 this.setState({     counter:this.state.counter+1 }) console.log(this.state.counter) s ...