怎么用纯css改变select的样式

转载于 2015-09-14 13:26:23 发布 · 1.4k 阅读

文章标签：

#css #select

Web前端-CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS3的appearance属性以及其他相关属性来自定义HTML中的<select>元素样式，包括去除默认样式、添加背景图片等，适用于Chrome、Safari及Firefox等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：http://uplifted.net/programming/change-default-select-dropdown-style-just-css/

其实，主要是css3的一个新属性appearance的作用，关于appearance可以看下面这个链接：

http://css.doyoe.com/

这是我在一个项目中做的

<pre name="code" class="css">.mn2_2_select1,.mn2_2_select2 {
	height:22px;
	padding-left:5px;
      border: 1px solid #dadada;   /*Removes border*/
	  appearance:none;
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background:url(../images/mn2_down_arrow.png) no-repeat;  /*Adds background-image*/
      background-position: right center;  /*Position of the background-image*/
      text-indent: 0.01px;  /*Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/  
}
select::-ms-expand { display:none; }