select加下拉箭头
2024-10-20 20:41:46
<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;
}
最新文章
- C#获取命令行输出内容的方法
- 用linq批量更新数据集
- Hibernate控制台显示创建数据库表语句
- 在c中保存状态
- js alert重写,适用于手机端,改自于网上的代码
- Unity3D独立游戏开发日记(一):动态生成树木
- 异步HTTP请求
- linux记录登录ip方法
- python3.4项目打包
- 【转载】简析TCP的三次握手与四次分手
- Asp,NET控制文件上传的大小
- PHP调用Python接口过程中所遇到的问题
- WebView的知识
- 【JVM.8】类加载及执行子系统的案例与实战
- logging- 日志记录
- SQLALchemy--ORM框架
- BZOJ4416 [Shoi2013]阶乘字符串 【序列自动机 + 状压dp】
- 专题训练之AC自动机
- jgrid 选择器 C#控件
- 修改Nginx与Apache上传文件大小限制
热门文章
- python基础(数据库、可视化软件Navicat、python操作MySQL)
- nuxt.js实现页面刷新功能
- MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(1)-后端项目框架搭建
- Pytorch基础-tensor数据结构
- [C++]我的理解之内存对齐
- [深度探索C++对象模型]关于成员初始化列表(member initiallization list)
- rvm安装ruby
- [硬核] Bootstrap Blazor Table 综合演示例子
- ActiveMQ 常见集群模式
- Luogu P6394 樱花,还有你题解