清除Css中select的下拉箭头样式

pekonchan 发布于2019-08-29 12:42 / 884人阅读

摘要：清除中的下拉箭头样式和里面的边框是不一样的，所以复写了一下很关键将默认的选择框样式清除在选择框的最右侧中间显示小箭头图片为下拉小箭头留出一点位置，避免被文字覆盖清除的默认选择框样式清除，隐藏下拉箭头

清除Css中select的下拉箭头样式

select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;

/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}

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

云服务器 GPU云服务器 select下拉箭头样式 js中下拉列表的样式 html中css样式 css的样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112088.html

修改radio、checkbox和select默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然已经不能满足需求。兼容更低版本浏览器的样式修改最后附上演示链接修改和默认样式现在前端页面效果日益丰富，默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求，在这里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默认样式有两种常用的方法纯CSS...

mumumu 2019-08-21 10:50 评论0 收藏0
css整理

摘要：移动端屏幕图片模糊图标是设备是的屏，那么你得准备一个，分辨率是，这么写这个也很关键设置倍图为倍图大小或者上面的代码，就能实现在屏幕密度为的情况下加载屏幕密度为时加载。移动端Retina屏幕图片模糊 //图标icon.png是16x16, 设备是2x的Retina屏，那么你得准备一个icon@2x.png，分辨率是32x32，这么写 .demo{ background-image:...

Miracle_lihb 2019-08-30 15:53 评论0 收藏0
写网页时拿起就用的小技巧

摘要：允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing：允许以特定的方式去定义匹配某个区域的特定元素。 content-box：在规定一个框的宽高之外给这个框加内边距和边框。 border-box：（textarea和select默认值）在规定的一个框的宽高之内给这...

econi 2019-08-20 18:21 评论0 收藏0
写网页时拿起就用的小技巧

摘要：允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing：允许以特定的方式去定义匹配某个区域的特定元素。 content-box：在规定一个框的宽高之外给这个框加内边距和边框。 border-box：（textarea和select默认值）在规定的一个框的宽高之内给这...

rubyshen 2019-08-29 13:03 评论0 收藏0