纯css改变下拉列表select框的默认样式

2024-04-05 05:44:28

下列CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

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; }

在线示例　　http://jsbin.com/yuxame/4/edit

注*　这篇文章参考了 change-default-select-dropdown-style-just-css，但文中所述固定了select框的长度和高度，对此进行了修改。

更新：针对旧版IE的解决方案

评论中提到 IE8/9并不支持 appearance:none CSS属性，想要支持的话可能需要非常特殊的方法，参考SF：我们需要为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

HTML

<div id="parent"><select><option>what</option><option>the</option><option>hell</option></select>
</div>

CSS

#parent {background: url('yourimage') no-repeat;width: 100px;height: 30px;overflow: hidden;
}#parent select {background: transparent;border: none;padding-left: 10px;width: 120px;height: 100%;
}

演示地址： http://jsbin.com/yuxame/edit?html,css,output

美中不足的是这种方案下拉选项的宽度会比他的父容器宽一点。

本文转载自：http://ourjs.com/detail/551b9b0529c8d81960000007

转载于:https://www.cnblogs.com/imsomnus/p/6007171.html

纯css改变下拉列表select框的默认样式相关推荐

html select 样式t调整_用纯css改变下拉列表select框的默认样式
**社区评论 ( Beta版 )** #0 危汤讽 2015-04-02 09:57:05 firefox浏览器支持不好,貌似是浏览器bug 回复 #1 林甩土 2015-04-03 09:06:57 ...
用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切 ...
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
改变复选框的默认样式，将其变成圆形，背景色为绿色
我们经常使用input复选框,它有自己的默认样式,很多时候,为了使页面更美观,我们需要修改复选框的样式.通常使用的修改方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改.如果事先有设计好的 ...
去除select框的默认样式（包括下拉尖括号）
/*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*清除ie的默认选 ...
webkit内核 css,纯CSS改变webkit内核浏览器的滚动条样式
基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下: 复制代码代码如下: ::-webkit-scrollbar/*整体部分*/ { width: 10px; height:10px ...
[css] css怎么更改表单的单选框或下拉框的默认样式？
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
纯CSS实现圆角矩形框
为什么80%的码农都做不了架构师?>>> 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果. 图一从 ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...

最新文章

热门文章