<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. 【实时数仓】Day05-ClickHouse:入门、安装、数据类型、表引擎、SQL操作、副本、分片集群

    一.ClickHouse入门 1.介绍 是一个开源的列式存储数据库(DBMS) 使用C++编写 用于在线分析查询(OLAP) 能够使用SQL查询实时生成分析数据报告 2.特点 (1)列式存储 比较: ...

  2. JDK卸载

    JDK卸载 从环境变量里的JAVA_HOME里找到jdk的主程序,删掉 把JAVA_HOME删掉,在把path里跟java_home相关的也删掉 在cmd里运行java-version

  3. 推荐一款 在线+离线数据 同步框架 Dotmim.Sync

    移动智能应用可以分为在线模式.纯离线模式与"在线+离线"混合模式.在线模式下系统数据一般存储在服务器端的大中型数据库(如 SQL Server.Oracle.MySQL 等),移动 ...

  4. SAP-FI模块 如何处理自动生成会计凭证增强

    一. 相关问题概览 1. 固定资产业务过渡科目摘要增强功能-F-02     需用表BKPF.BSEG.T001.通过BUKRS.BELNR.GJAHR三个字段相等关联BKPF与BSEG.通过BKPF ...

  5. [Computer Networks]一个http请求的完成的全过程

    摘要 本文主要讲述了一个 http request 请求从发出到收到 response 的整个生命周期,希望可以通过对整个流程的一个描述来梳理清楚五层网络协议的定义以及各层之间是如何协作的. 对于后端 ...

  6. 用python爬取网络文章----滴天髓

    用python爬取网络文章真的很简单.主要分以下几个步骤 1.安装并导入相关模块. 这里我们要用到两个模块,分别是reqesets和lxml 安装命令pip install requests和pip ...

  7. [Leetcode]设计循环队列

    题目   代码 class MyCircularQueue { public: /** Initialize your data structure here. Set the size of the ...

  8. 刷题笔记——3003.鸡兔同笼问题 & 2767.计算多项式的值

    题目1 3003.鸡兔同笼问题 代码 while True: try: x,y=map(int,input().strip().split()) a = int((4*x-y) / 2) b = x ...

  9. Strapi入门记--01创建项目,账户,测试表,测试接口

    Strapi 是什么 中文文档地址 Strapi 是一个开源的无头 CMS,开发人员可以自由选择他们喜欢的工具和框架,并允许编辑使用他们的应用程序的管理面板来管理和分发他们的内容.基于一个插件系统,S ...

  10. 一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵。

    一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵.(请写出解题步骤,并编写程序进行结果验证) 参考 matlab代码如下 ...