用纯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

智能推荐

Json.NET使用笔记-程序员宅基地

文章浏览阅读1.4k次。本文是个人在工作中记录Json.NET使用笔记,简单的举例介绍了一下使用方法。_json.net

JNA二次开发华视身份证阅读器_华视身份证 jna-程序员宅基地

文章浏览阅读3.4k次,点赞5次,收藏15次。JAN二次开发华视身份证阅读器前言添加依赖编写代码前言这两天了解了一下java调用dll动态库的方法,总的有三种:JNI、JNA、JNative,其中JNA调用DLL是最方便的。·JNIJNI是 Java native interface的缩写,它提供了一定的API,实现了Java和其他语言之间的通信。从Java1.1之后JNI标准成为Java平台的一部分,它允许Java与其他语音进行通信..._华视身份证 jna

react之antd组件InputNumber控制小数点_antd inputnumber decimalseparator-程序员宅基地

文章浏览阅读3.9k次。InputNumber控制用户输入小数点的个数在项目过程中有个需求,需要控制用户输入小数点的个数问题。话不多说上代码://输入框绑定方法<InputNumber style={{ width: '100%' }} formatter={limitDecimals} parser={limitDecimals}/>方法:const limitDecimals = (value: string | number): string => { const reg_antd inputnumber decimalseparator

matlab 约束条件下三元函数的图像问题_三元函数图像-程序员宅基地

文章浏览阅读4.1k次,点赞5次,收藏15次。题目:绘制z=x+y,0<x<1,0<y<1,0.5<x+y<1(0.5<z)约束条件下的图像代码:clc;clear;x=0:0.01:1;y=0:0.01:1;[xx,yy]=meshgrid(x,y);[m,n]=size(xx); for i=1:m for j=1:n z(i,j)=x(i)+y..._三元函数图像

linux下恢复误删除oracle的数据文件_oracle 数据文件误删 linux-程序员宅基地

文章浏览阅读480次。场景描述:操作系统级别的删除数据文件(/oracle/oradata/ora10g/system1.dbf),而且数据库没有崩溃,仍然处于open状态。原理:在Linux操作系统中,如果文件从操作系统级别被删除掉,之前打开该文件的进程仍然持有相应的文件句柄,所指向的文件仍然可以读写,并且该文件的文件描述符可以从/proc目录中获得。如果关闭数据库,则句柄就会丢失。恢复步骤如..._oracle 数据文件误删 linux

VScode 自定义代码颜色、背景颜色、方法名、括号颜色-程序员宅基地

文章浏览阅读10w+次,点赞108次,收藏323次。自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,代码提示啥方面做的也特别好,很好上手,作为小白我用了很长一段时间。后来浅浅学习微信小程序开发,得写wxml,Hbilder上没有wxml格式的代码提示,代码高亮等。于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。于是后来又接触了sublime,sublime相比..._vscode 自定义代码颜色、背景颜色、方法名、括号颜色

随便推点

opencv2 学习第13天 轮廓特征及其描述子_轮廓描述子-程序员宅基地

文章浏览阅读2.3k次。我们在提取了轮廓之后我们最想做的就是把它画出来,人们还是愿意相信可以看见的东西这个时候就将他们打印出来就可以了,提取的特征一般放在vector里//获取轮廓: findContours(image, //图像 contours, //轮廓点 //包含图像拓扑结构的信息(可选参数,这里没有选) CV_RETR_EXTE_轮廓描述子

【kettle8.2——从零开始】二、kettle——helloWorld_kettle 8.2 固定到开始屏幕-程序员宅基地

文章浏览阅读376次。前言:上篇文章讲了讲kettle是什么,以及kettle是由什么组成的,以及kettle四大组件的作用,文末还放了一个下载地址,那么本篇就来带大家写个helloWorld首先,默认大家的电脑上都有jdk1.8以上的java环境(没有的赶快去装,记得配置环境变量),以及kettle(笔者使用的是8.2版本的,所以推荐大家也使用相同版本,防止版本不同带来的差异,毕竟版本问题带来的bug最坑!!!),最后,是mysql(不一定非要mysql,其他数据库也可以,只是笔者演示使用的mysql)首先解压下载下_kettle 8.2 固定到开始屏幕

家谱系统代码_csdn家谱运算代码-程序员宅基地

文章浏览阅读1.4k次,点赞9次,收藏25次。#include <stdio.h>#include <string.h>#include <stdlib.h>#define MAX 20typedef struct node{ char name[MAX]; char sex; int generation;}node;typedef struct treenode{ struct node data; struct treenode *brother; ._csdn家谱运算代码

ceres-solver中设置优化变量的范围(上下界)_ceres如何设置求解值的范围-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏7次。problem.SetParameterUpperBound(para_t, 2, 0.0000001);problem.SetParameterLowerBound(para_t, 2, -0.0000001);_ceres如何设置求解值的范围

Swift之从SIL深入分析函数的派发机制_protocol witness for in conformance-程序员宅基地

文章浏览阅读6.9k次,点赞3次,收藏5次。一、引言现有如下代码,输出什么结果? protocol Drawing { func render() } extension Drawing { func circle() { print("protocol") } func render() { circle() } } class SVG: Drawing { func circle() { print("class") } } SVG().render() // what's the o_protocol witness for in conformance

嵌入式Linux开发板_迅为iTOP-4412精英版入门篇(一)_4412开发入门-程序员宅基地

文章浏览阅读911次,点赞2次,收藏4次。迅为iTOP-4412开发板平台,ARM Cortex A9架构,主频1.4GHz-1.6GHz,1GB 双通道 DDR3(2GB 可选),4GB EMMC(16GB 可选),提供多种外接模块,如:RFID模块、继电器模块、CAN总线 RS485总线模块、串口转接板、矩阵键盘模块、AVIN模块、GPS模块、VGA模块、500万摄像头模块、WIFI/蓝牙模块等。拥有丰富的板载接口以及众多配套扩展模块,并提供丰富的学习教程与资源,是嵌入式Linux学习与开发最佳选择。_4412开发入门

推荐文章

热门文章

相关标签