<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加下拉箭头的更多相关文章

  1. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  2. select默认下拉箭头改变、option样式清除

    谷歌.火狐.ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标: /* --ie清除--*/ select::-ms-expand{ display: ...

  3. 清除Css中select的下拉箭头样式

    select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...

  4. css清除select的下拉箭头样式

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  5. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  6. html select 下拉箭头隐藏

    html select 下拉箭头隐藏 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  7. select下拉箭头改变,兼容ie8/9

    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计 <html> <head> <meta charset="utf-8"& ...

  8. select下拉箭头样式重置

    select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../ima ...

  9. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  10. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. 【SQL】SQL常见窗口函数整理汇总大全(用到over的场景)

    〇.概述 1.常用网站 SQL窗口函数:https://blog.csdn.net/liangmengbk/article/details/124253806 2.介绍 像聚合函数一样对一组数据进行分 ...

  2. 过压保护芯片,高输入电压(OVP)

    PW2606是一种前端过电压和过电流保护装置.它实现了广泛的输入电压范围从2.5V到40V.过电压阈值可在外部编程或设置为内部默认设置.集成功率路径nFET开关的超低电阻确保了更好的性能电池充电系统应 ...

  3. 大数据-业务数据采集-FlinkCDC

    CDC CDC 是 Change Data Capture(变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入.更新以及删除等),将这些变更按发生的顺序完整记录下来,写入 ...

  4. 4、Idea设置显示多行文件

    使用IDEA时,可能会没有注意到,一旦打开过多的Java文件时,默认会堆积在一行显示,就像浏览器打开了多个标签一样,此时需要通过右侧箭头筛选的方式来选择其他文件.为了解决这一问题,需要打开多行显示的方 ...

  5. 简单体验一个高性能,简单,轻量的ORM库- Dapper (无依赖其它库,非常方便高效)

    步骤1)引入该ORM库. 使用Nuget搜索"Dapper"安装或者直接从github上下载源码  (https://github.com/StackExchange/Dapper ...

  6. Web初级——CSS3

    CSS Cascding Style Sheet(层叠级联样式表) 1.前言 1.1CSS优势 内容和表现分离 可以实现CSS代码复用 利用SEO,容易被搜索引擎收录 1.2CSS导入方式 <! ...

  7. 探究BrainSplit-集群脑裂

    本篇文章将会以redis集群为例,分享在主从集群中会导致数据丢失的一个问题:BrainSplit-集群脑裂 1.什么是集群脑裂 所谓的脑裂,就是指在主从集群中,同时有两个主节点,它们都能接收写请求.而 ...

  8. socket模块实现网络编程及struct模块解决黏包问题

    目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ...

  9. 9月23日内容总结——pycharm的安装与使用、python语法规范与注释、变量和常量、索引取值以及部分数据类型简介

    今日内容总结 目录 今日内容总结 一.pycharm的安装 1.软件介绍 2.正版安装 1.下载软件 2.安装软件 3.其他方法安装(需要先下载相关资源) ①无限试用法 ②傻瓜式激活法 ③淘宝购买 二 ...

  10. drf-序列化器、反序列化、反序列化校验

    1.APIView执行流程 1.之前我们是基于django原生的View编写接口,drf提供给咱们的一个类APIView,以后使用drf写视图类,都是继承这个类及其子类,APIView本身就是继承了D ...