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】SQL常见窗口函数整理汇总大全(用到over的场景)
			〇.概述 1.常用网站 SQL窗口函数:https://blog.csdn.net/liangmengbk/article/details/124253806 2.介绍 像聚合函数一样对一组数据进行分 ... 
- 过压保护芯片,高输入电压(OVP)
			PW2606是一种前端过电压和过电流保护装置.它实现了广泛的输入电压范围从2.5V到40V.过电压阈值可在外部编程或设置为内部默认设置.集成功率路径nFET开关的超低电阻确保了更好的性能电池充电系统应 ... 
- 大数据-业务数据采集-FlinkCDC
			CDC CDC 是 Change Data Capture(变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入.更新以及删除等),将这些变更按发生的顺序完整记录下来,写入 ... 
- 4、Idea设置显示多行文件
			使用IDEA时,可能会没有注意到,一旦打开过多的Java文件时,默认会堆积在一行显示,就像浏览器打开了多个标签一样,此时需要通过右侧箭头筛选的方式来选择其他文件.为了解决这一问题,需要打开多行显示的方 ... 
- 简单体验一个高性能,简单,轻量的ORM库-  Dapper  (无依赖其它库,非常方便高效)
			步骤1)引入该ORM库. 使用Nuget搜索"Dapper"安装或者直接从github上下载源码 (https://github.com/StackExchange/Dapper ... 
- Web初级——CSS3
			CSS Cascding Style Sheet(层叠级联样式表) 1.前言 1.1CSS优势 内容和表现分离 可以实现CSS代码复用 利用SEO,容易被搜索引擎收录 1.2CSS导入方式 <! ... 
- 探究BrainSplit-集群脑裂
			本篇文章将会以redis集群为例,分享在主从集群中会导致数据丢失的一个问题:BrainSplit-集群脑裂 1.什么是集群脑裂 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而 ... 
- socket模块实现网络编程及struct模块解决黏包问题
			目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ... 
- 9月23日内容总结——pycharm的安装与使用、python语法规范与注释、变量和常量、索引取值以及部分数据类型简介
			今日内容总结 目录 今日内容总结 一.pycharm的安装 1.软件介绍 2.正版安装 1.下载软件 2.安装软件 3.其他方法安装(需要先下载相关资源) ①无限试用法 ②傻瓜式激活法 ③淘宝购买 二 ... 
- drf-序列化器、反序列化、反序列化校验
			1.APIView执行流程 1.之前我们是基于django原生的View编写接口,drf提供给咱们的一个类APIView,以后使用drf写视图类,都是继承这个类及其子类,APIView本身就是继承了D ... 
