select加下拉箭头
<div class="flex">
<label>城市</label>
<div class="dealerbo">
<select><option value="110000">北京市</option></select>
</div>
</div>
CSS
.flex {
width: 30%;
color: #2D3E4E;
font-size: 15px;
border-bottom: 1px solid rgba(45, 62, 78, 0.3);
margin-right: 5%;
}
label {
text-align: left;
width: 100%;
display: inline-block;
margin-bottom: 5%;
font-weight: 600;
font-size: 15px;
}
.dealerbo {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
position: relative;
width: 99%;
align-items: center;
justify-content: space-between;
background: url(../images/arrow_Down.png) no-repeat 100% center;
overflow: hidden;
padding-right: 5%;
white-space: nowrap;
}
select {
height: 27px;
font-size: 14px;
color: #000;
border: none;
background-color: transparent;
padding-bottom: 5px;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
<div class="city">
<div>
<select>
<option value="110000">北京市</option>
</select>
</div>
<div>
<select>
<option value="110000">北京市</option>
</select>
</div>
</div>
.flex {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 0.1rem;
border-bottom: 1px solid rgba(45, 62, 78, 0.3);
}
.flex label {
text-align: left;
width: 100%;
display: inline-block;
margin-bottom: 2%;
font-weight: 600;
}
.city {
position: relative;
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
width: 100%;
}
.city::before {
content: '';
border-right: 1px solid #ddd;
height: 20px;
width: 1px;
position: absolute;
left: 47%;
bottom: 9%;
}
.city > div {
position: relative;
width: 40%;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 10%;
}
.popBox .pb .form .flex .city > div::after {
content: '';
height: 0.11rem;
width: 0.22rem;
position: absolute;
background: url(../../pc/images/arrow_Down.png) no-repeat 100% center;
right: 0;
background-size: 100%;
bottom: 0.2rem;
} select {
height: 27px;
font-size: 0.28rem;
color: #000;
border: none;
background-color: transparent;
padding-bottom: 5px;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
a, button, input, optgroup, select, textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button, optgroup, select, textarea {
-webkit-appearance: none;
outline: none;
border-radius: 0;
}
select option {
color: #000;
font-size: 0.28rem;
}
select加下拉箭头的更多相关文章
- 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头
一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...
- select默认下拉箭头改变、option样式清除
谷歌.火狐.ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标: /* --ie清除--*/ select::-ms-expand{ display: ...
- 清除Css中select的下拉箭头样式
select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...
- css清除select的下拉箭头样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
- html select 下拉箭头隐藏
html select 下拉箭头隐藏 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- select下拉箭头改变,兼容ie8/9
各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计 <html> <head> <meta charset="utf-8"& ...
- select下拉箭头样式重置
select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../ima ...
- 用纯css改变select的下拉菜单
select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- 【SQL进阶】【表默认值、自增、修改表列名、列顺序】Day02:表与索引操作
一.表的创建.修改与删除 1.创建一张新表 [设置日期默认值.设置id自增] [注意有备注添加备注COMMENT] CREATE TABLE user_info_vip( id int(11) pri ...
- 深入解读MySQL InnoDB存储引擎Update语句执行过程
参考b站up 戌米的论文笔记 https://www.bilibili.com/video/BV1Tv4y1o7tA/ 书籍<mysql是怎样运行的> 极客时间<mysql实战45讲 ...
- mybatis 之定义拦截器 控制台SQL的打印
类型 先说明Mybatis中可以被拦截的类型具体有以下四种: 1.Executor:拦截执行器的方法.2.ParameterHandler:拦截参数的处理.3.ResultHandler:拦截结果集的 ...
- Python实验报告(第7章)
实验7:面向对象程序设计 一.实验目的和要求 1.了解面向对象的基本概念(对象.类.构造方法): 2.学会类的定义和使用: 3.掌握属性的创建和修改: 4.掌握继承的基本语法. 二.实验环境 软件版本 ...
- 真正“搞”懂HTTP协议07之body的玩法(实践篇)
我真没想到这篇文章竟然写了将近一个月,一方面我在写这篇文章的时候阳了,所以将近有两周没干活,另外一方面,我发现在写基于Node的HTTP的demo的时候,我不会Node,所以我又要一边学学Node,一 ...
- Java进阶篇——设计模式
设计模式 一.代理模式 使用代理类对真实对象进行代理,包括真实对象方法的调用.功能的扩展等.访问的时候也只能访问到代理对象,既保护了真实对象同时可以在原始对象上进行扩展.类似于中介在卖家和买家之间的角 ...
- [C#]C++/CLI中interior_ptr和pin_ptr的区别
interior_ptr 当垃圾回收器移动对象时,Interior pointer能随之移动,并始终指向该对象. 但是如果把这个指针返回给外部函数,那么当垃圾回收时(垃圾回收期间会压缩对象,),对象地 ...
- NoClassDefFoundError的两种情况
ClassNotFoundException vs. NoClassDefFoundError ClassNotFoundException 关于ClassNotFoundException发生的原因 ...
- Qt界面设计--侧边栏隐藏和滑出
在日常项目中,界面布局上经常使用到侧边栏的方式,在侧边栏放置控件进行复合使用,可以实现子功能界面的隐藏和滑出,效果展示如下: 界面控件很简单,主界面QWidget,侧边栏也用一个QWidget和一个按 ...
- 【转】C#接口知识
参考:日常收集 C# 接口知识 (知识全面) 目录 第一节 接口慨述 第二节 定义接口 第三节 定义接口成员 第四节.访问接口 第五节.实现接口 第六节.接口转换 第七节.覆盖虚接口 第一节 接口慨述 ...