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 ...
随机推荐
- 【Shell案例】【for循环、seq生成】3、输出7的倍数
描述写一个 bash脚本以输出数字 0 到 500 中 7 的倍数(0 7 14 21...)的命令 方法1:in方式循环 [if的括号是中括号,中间的条件要有空格] [循环体用do和done配对] ...
- [攻防世界][江苏工匠杯]unseping
打开靶机对应的url 上来就是代码审计 <?php highlight_file(__FILE__); class ease{ private $method; private $args; f ...
- python Flask 操作数据库(2)
单表操作 数据准备 from flask import Flask from flask_sqlalchemy import SQLAlchemy class Config: DEBUG = True ...
- [深度学习] tf.keras入门5-模型保存和载入
目录 设置 基于checkpoints的模型保存 通过ModelCheckpoint模块来自动保存数据 手动保存权重 整个模型保存 总体代码 模型可以在训练中或者训练完成后保存.具体文档参考:http ...
- Python从0到1丨细说图像增强及运算
摘要:本文主要讲解常见的图像锐化和边缘检测方法,即Roberts算子和Prewitt算子. 本文分享自华为云社区<[Python从零到壹] 五十七.图像增强及运算篇之图像锐化Roberts.Pr ...
- day07-Vue04
Vue04 12.Vue2 脚手架模块化开发 目前开发模式的问题: 开发效率低 不够规范 维护和升级,可读性比较差 12.1基本介绍 官网地址 什么是Vue Cli脚手架 12.2环境配置,搭建项目 ...
- P1005 [NOIP2007 提高组] 矩阵取数游戏
题目传送门 前言 今天依旧是不写高精的一天呢!(是的,这位作者又只拿了开 \(LL\) 的 \(\color{yellow}{60}\) 分) 思路描述 看到数据 \(n,m \le 80(30)\) ...
- 动力节点——day02
ipconfig ip地址的配置信息,ipconfig -all 更详细的配置信息 查看两台计算机是否可以正常通信 ping ip地址/域名(-t) 快捷键:ctrl+c复制 ctrl+v粘贴 c ...
- C++中进程间相互通信的方法
详细资料查看https://www.cnblogs.com/swunield/articles/3893250.html 在我看来主要分方式就是 1.共享内存 2.postmessage发送出去 3. ...
- Linux CentOS7查看软件包安装时间
rpm -qi 软件包名,比如httpd,lrzsz [devops@host9 ~]$ rpm -qi lrzsz Name : lrzsz Version : 0.12.20 Release : ...