CSS原生修改select 样式,实现下拉三角括号

1、目标效果

CSS原生修改select 样式,实现下拉三角括号_第1张图片

CSS原生修改select 样式,实现下拉三角括号_第2张图片

点击左边的下三角括号,实现select下拉。

原生select

CSS原生修改select 样式,实现下拉三角括号_第3张图片

Duratioin

2、修改样式

首先修改select原生样式,去掉边框和三角号

select{
appearance: none;
-webkit-appearance: none;
border:0
}

CSS原生修改select 样式,实现下拉三角括号_第4张图片

3、增加外边框和底部下三角括号图片背景

Duratioin


在线测试结果【备注:图片地址是我本地的,所以在线测试不显示,使用时候将图片地址改为有效地址即可】

CSS原生修改select 样式,实现下拉三角括号_第5张图片

CSS原生修改select 样式,实现下拉三角括号_第6张图片

你可能感兴趣的:(webview,android,java)