用纯css改变下拉列表select框的默认样式_菜鸟每天一学的博客-程序员宅基地_css设置下拉框样式

技术标签: CSS  

html

<div>
	<select>
		<option>项目1</option>
		<option>项目2</option>
		<option>项目3</option>
	</select>
</div>

css


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

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

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

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

 /*如果不用背景图片写,可以用iconfont图标*/
div{position:relative;}
div:after{font-family: "iconfont";content:"\e61a"; width: 16px; height: 16px; position: absolute; right: 5%;top: 30%;pointer-events: none; font-size:16px;color:#b3b3b3;}

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

针对旧版IE的解决方案

IE8/9并不支持 appearance:none CSS属性,想要支持的话可能需要非常特殊的方法, 我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为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%;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44370537/article/details/86572470

智能推荐

引入阿里巴巴矢量图图标到HTML页面_Babamboo的博客-程序员宅基地

1.打开地址:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22.注册账号3.选择图标点击加入购物车,4.打开购物车5.添加到项目6.打开项目7.下载图标文件8.将以下几个文件添加到项目文件夹中,可以重新创建一个文件夹9.创建一个.css文件,按照以下写好内容10.在HTML中使用link标签导入css文件11.在需要添加图标的位置添加其中class是创建的css文件中font-famil

aba问题mysql_Mysql事务隔离以及MVCC实现原理_ljyzyw的博客-程序员宅基地

上一篇我们了解了mysql的几种日志,大致知道这些日志的作用,今天我们配合Mysql的事务以及事务的隔离级别进一步理解mysql如何实现事务相关的特性。其中重点理解mysql innodb的多版本控制和乐观锁,这篇大部分是文字描述,也是理解mysql-innodb事务的基础内容,也是面试会问到的内容。事务的特征ACID原子性:事务是一个原子操作单元,其对数据的修改,要么全都执行,要么全都不执行。...

计算机网络理论知识 RIP协议,计算机网络知识点——8.网络层之RIP协议_Gigiain的博客-程序员宅基地

距离向量算法:距离向量算法(Distance vector algorithm)是一种最短路径算法。基本思想如下:每个节点周期性的发送它自己的距离向量估计(distance vector estimate)给邻居。主要使用在RIP协议。每隔一段时间,路由器会向所有邻居结点发送它到每个目的结点的距离表,同时它也接收每个邻居结点发来的距离表。这样以此类推,经过一段时间后便可将网络中各路由器所获得的距离...

不常用组件介绍_513339083的博客-程序员宅基地

Android之TextureView浅析 http://www.2cto.com/kf/201405/303284.html

Conflux v2.0.0网络Hardfork升级公告_Conflux中文社区的博客-程序员宅基地

Conflux 网络将在 区块数 92060600 或区块高度 36935000(预计 2022 年 2 月 23 日 12 时)至 区块高度 37230000(预计 2022 年 2 月...

2021-06-20 Springcloud DiscoveryClient没有getServices()方法_北斗2018的博客-程序员宅基地

原因:导错包了。原来导入的是 import com.netflix.discovery.DiscoveryClient;正确是:import org.springframework.cloud.client.discovery.DiscoveryClient;

随便推点

MEMORY系列之“FRAM”_结界很厚的博客-程序员宅基地_fram存储器

新型的NVM主要有FRAM、RRAM、MRAM等,本文主要介绍FRAM的存储结构、对外接口及引脚定义、读写操作以及应用场景等。技术优势FRAM(Ferroelectric RAM)存储单元的基本原理是铁电效应,是应用铁电薄膜的自发性极化形式储存的铁电存储器件,由于FRAM通过外部电场控制铁电电容器的自发性极化,与通过热电子注入或隧道效应而完成写入动作的EEPROM以及Flash相比,FRAM具有写入速度快(为EEPROM、Flash的1000倍以上),因为它在擦写时不需要高压,因此写入时的功耗大为降低(

socket网络编程_骥念的博客-程序员宅基地

网络编程1. socket介绍问题一:什么是socket?socket(简称套接字)是进程间通信的一种方式。它与其它进程通信的一个主要不同是:它能实现不同主机间的进程通信我们网络上各种各样的服务都是基于socket来完成通信的,例如我们每天浏览网页、QQ聊天、收发email等等问题二:如何创建socket?import socketsocket.socket(Family, Type)参数说明:Family:可以选择 AF_INET(用于Internet进程间通信)或者AF_UNIX

php微信刷卡支付开发,【微信支付】刷卡支付开发者文档_Redstone1024的博客-程序员宅基地

1、签名算法签名生成的通用步骤如下:第一步,设所有发送或者接收到的数据为集合M,将集合M内非空参数值的参数按照参数名ASCII码从小到大排序(字典序),使用URL键值对的格式(即key1=value1&amp;key2=value2…)拼接成字符串stringA。特别注意以下重要规则:◆ 参数名ASCII码从小到大排序(字典序);◆ 如果参数的值为空不参与签名;◆ 参数名区分大小写;◆ 验证调用返...

继承 之 基类与派生类_Fool _one的博客-程序员宅基地

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、何为基类,何为派生类 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从一个类中派生出另一个类,原始类被称为基类,继承类成为派生类,子继承父,父为基类,子为派生类,则要实现继承,首先要出现基类即父类。&nbsp;&nbsp;&nbsp;&nbsp;...

winfrom点击按钮修改数据_C#winform窗口登录和数据的增删改查_Flanker Edward的博客-程序员宅基地

工具:VS2013数据库SqlServer2008两张表,一个用户登录表,一个资料表用于增删改查 。先把表建好。可以根据我发的图建立,这样下面的代码修改的就少。资料部分SQLCREATE TABLE [dbo].[Customer]([CustomerID] [varchar](20) NOT NULL,[CompanyName] [varchar](20) NULL,[ContacName] [...

java 向文件追加内容_JAVA 给文件追加内容_顽猴溜溜的博客-程序员宅基地

import java.io.BufferedWriter;import java.io.FileOutputStream;import java.io.FileWriter;import java.io.IOException;import java.io.OutputStreamWriter;import java.io.RandomAccessFile;/*** 描述:追加内容到文件末尾* ...