1、目标效果
文章图片
文章图片
点击左边的下三角括号，实现select下拉。
原生select
文章图片
2、修改样式
首先修改select原生样式，去掉边框和三角号
select{
appearance: none;
-webkit-appearance: none;
border:0
}
文章图片
3、增加外边框和底部下三角括号图片背景
select{
appearance: none;
-webkit-appearance: none;
border:0
}
/* 增加外框 */
.iselect-body {
width: 600px;
height: 88px;
background: #252525;
border-radius: 16px;
border: 2px solid #3F4142;
}
/* 定义自己的select */
.ifrom-select {
width: -webkit-calc(100% - 60px);
height: 88px;
line-height: 88px;
margin: 0 30px;
background-color: #FFFFFF00;
font-size: 32px;
font-weight: 400;
color: #979797;
}
/* 地下的图片，省去写下三角括号，简单实用，到处兼容（这里与上面的ifrom-select可以合到一起，为了突出这里所以分开了） */
.ifrom-select-background {
background: url("../../assets/imgs/arrow-down.png") no-repeat scroll right center transparent;
background-size: 0.34rem 0.2rem;
}
在线测试结果【备注：图片地址是我本地的，所以在线测试不显示，使用时候将图片地址改为有效地址即可】
文章图片
文章图片
【webview|CSS原生修改select 样式，实现下拉三角括号】
推荐阅读
- 求求你们了，别再乱用 parallelStream 了，速度竟然比 Stream 还要慢！！
- JAVA开发|mysql数据库安装
- 【小小的项目|【基于Java和Socket等技术的聊天室系统的设计与实现-----这或许就是QQ的原型之一吧！（效果+源码+论文+视频介绍等获取~！）】
- SSM框架解析|【SSM框架】Mybatis详解10(源码自取)之入参、返回值map
- 链表|[java刷算法]牛客—剑指offer链表有环的入口、反转链表、合并排序链表
- 经验之谈|猿创征文｜当我在追光 我与光同航--我与Java的技术成长之路
- 直击面试|【直击面试】JVM这些面试题你都会了吗
- SSM框架解析|【SSM框架】Mybatis详解11(源码自取)之表关联关系
- tidb|我和tidb 的故事 - 我们终会在平行世界相遇